<!doctype html>
<html>
<head>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>大数据可视化</title>
<link type="text/css" href="css/public.css" rel="stylesheet">
<link type="text/css" href="css/icon.css" rel="stylesheet">
<link type="text/css" href="css/index.css" rel="stylesheet">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
</script>
<script src="js/echarts.min.js"></script>
</head>
<style>
.abc{
}
</style>
<body>
<div class="bg">
<div class="title">大数据可视化</div>
<div class="leftMain">
<div class="leftMain_top">
<div class="leftMain_topIn">
<ul>
<li>
<div class="liIn">
<h3>这里是标题1</h3>
<p class="shu"><span class="shu1">6890.69</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>这里是标题2</h3>
<p class="shu"><span class="shu2">6090.99</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>这里是标题3</h3>
<p class="shu"><span class="shu3">2890.39</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>这里是标题4</h3>
<p class="shu"><span class="shu4">7590.15</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
</ul>
</div>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>这里是标题</h3>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
<script type="text/javascript">
//window.onload = function () {
//指定图表的配置项和数据
var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
text: '',
subtext: ''
},
grid:{
x:40,
y:40,
x2:20,
y2:20,
},
xAxis: {
data: dataAxis,
axisLabel: {
/*inside: true,*/
interval:0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol:['none', 'arrow'],
symbolOffset: 12,
lineStyle:{
color: '#fff',
}
},
z: 10
},
yAxis: {
type: 'value',
name: '单位：元',
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle:{
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0efdff'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#0efdff'}
]
)
}
},
data: data
}
]
};
// Enable data zoom when user click bar.
/*var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});*/
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//};
</script>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
科技web大数据可视化投屏源码.zip （16个子文件） 
bigdata css 
icon.css 70KB public.css 19KB index.css 10KB images 
border_bg.jpg 20KB
title_right_bg.png 3KB title_border_bg.png 3KB title_left_bg.png 19KB bg2.jpg 206KB fonts DIN-Medium.otf 27KB DIN-Light.otf 27KB DIN-Bold.otf 28KB
index.html 25KB js jquery.numscroll.js 2KB jquery-1.11.0.min.js 94KB echarts.min.js 760KB echarts.all.js 6KB资源评论
laotaipo1232022-06-15用户下载后在一定时间内未进行评价，系统默认好评。
