echarts实现一个大数据大屏看板示例代码
代码语言：html
所属分类：图表
代码描述：echarts实现一个大数据大屏看板示例代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>
<style>
body{
background: #081325 url(//repo.bfw.wiki/bfwrepo/images/echarts/interact.png) center no-repeat;
background-size:cover;
}
div{
box-sizing: border-box;
}
.clearfix{
clear:both;
}
.container-header{
width:100%;
height:74px;
text-align: center;
box-sizing: border-box;
}
.container-header .nowTime{
position: absolute;
left:20px;
top:41px;
font-size: 0;
}
.container-header .nowTime li{
display: inline-block;
width:130px;
height:40px;
font-size: 24px;
color:#fff;
}
.nowTime li{
display: inline-block;
float: left;
/*font-weight: 800;*/
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nowTime li div{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 12px;
text-align: left;
}
.nowTime li p {
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 12px;
}
.container-header .location{
position: absolute;
right:17px;
top:46px;
}
.location i{
font-size: 14px;
font-weight: 800;
color:#7e9bc6;
}
.location span{
font-size: 16px;
line-height: 30px;
color:#168fcd;
}
.container-header h3{
line-height: 74px;
font-size: 40px;
font-weight: 800;
color:#fff;
}
/* 边角 */
.left-top,.right-top,.left-bottom,.right-bottom{
position:absolute;
width:13px;
height:13px;
}
.left-top{
left:0;
top:0;
border-left:solid 2px #045291;
border-top:solid 2px #045291;
}
.right-top{
right:0;
top:0;
border-right:solid 2px #045291;
border-top:solid 2px #045291;
}
.left-bottom{
left:0;
bottom:0;
border-left:solid 2px #045291;
border-bottom:solid 2px #045291;
}
.right-bottom{
right:0;
bottom:0;
border-right:solid 2px #045291;
border-bottom:solid 2px #045291;
}
.resource-right .com-count-title{
font-size: 16px;
margin-left: 10px;
}
.com-count-title{
color:#1bb4f9;
padding:20px;
font-size: 22px;
}
.com-screen-content{
width:100%;
height:auto;
}
.com-screen-content2{
width:100%;
height:auto;
}
.filter-type{
font-size: 0;
}
.filter-type li:hover{
cursor: pointer;
}
.filter-type li{
display: inline-block;
width:120px;
line-height: 40px;
font-family: myFirstFont;
font-size: 20px;
text-align:center ;
color:#024f9b;
border:solid 1px #075797;
background:#0d2343;
}
.filter-type li.active{
color:white;
background:#0c182d;
border:solid 1px #1bb9f9;
}
.container-content{
padding:10px 20px;
box-sizing: border-box;
}
.count-base,.count-resource,.count-share,.count-topic{
position:relative;
padding:20px;
margin-top: 10px;
box-sizing: border-box;
}
.com-count-title{
color:#1bb4f9;
font-size: 16px;
padding:0;
}
.count-base{
margin-left:10px;
float:left;/*浮动*/
width:32%;
height:350px;
background: url('//repo.bfw.wiki/bfwrepo/images/echarts/left-top3.jpg') center no-repeat;
background-size:cover;
}
.count-resource{
margin-left:10px;
float:left;
width:32%;
height:350px;
background: url('//repo.bfw.wiki/bfwrepo/images/echarts/left-top3.jpg') center no-repeat;
background-size:cover;
}
.count-share{
margin-left:10px;
float:left;
width:48.4%;
height:350px;
background: url('//repo.bfw.wiki/bfwrepo/images/echarts/left-bottom2.jpg') center no-repeat;
background-size:cover;
}
.count-topic{
margin-left:10px;
float:left;
width:48.4%;
height:350px;
background: url('//repo.bfw.wiki/bfwrepo/images/echarts/left-bottom2.jpg') center no-repeat;
background-size:cover;
}
.data-label{
position:absolute;
top:20px;
right:10px;
}
.data-label li{
float:left;
width: 90px;
text-align: center;
font-size: 16px;
color: #828c9d;
}
.data-label li:hover,.data-label li.active{
color: #fff;
background: url("//repo.bfw.wiki/bfwrepo/images/echarts/choose-item.png") center no-repeat;
}
@charset "utf-8";
/* author lyc */
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0); }
li{ list-style:none }
img{ border:none}
a{text-decoration:none;}
/* -------------------------摇奖排行榜----------------------------------- */
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#f0ece2}
.topRec_List dd{ float:left; text-align:left; border-bottom:1px solid #1B96EE; color:#1B96EE;font-size:14px;}
.topRec_List dl dd:nth-child(1){ width:50%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(2){ width:30%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(3){ width:20%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:left; font-size:9px;color:#76dbd1}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div{ float:left;}
.topRec_List li div:nth-child(1){ width:50%;}
.topRec_List li div:nth-child(2){ width:30%;}
.topRec_List li div:nth-child(3){ width:20%;}
.use-data{
text-align: center;
padding: 2px 0;
margin-top:3%;
height: 5%;
background: url(//repo.bfw.wiki/bfwrepo/images/echarts/resource-use-data.jpg) center no-repeat;
background-size:cover;
border: solid 1px #093552;
border-right: 0px;
border-left: 0;
}
.use-data li{
width:30%;
font-size: 0;
display: inline-table;
border-right:solid 1px #1f4191;
}
.use-data li:last-child{
border-right:0;
}
.use-data .data-count{
color:#fff;
font-family:myFirstFont ;
height: 1%;
font-size: 14px;
}
.use-data .data-name{
color:#1bb9f9;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container-header">
<ul class="nowTime">
<li></li>
<li></li>
</ul>
<div class="location">
<i class="icon iconfont icon-buoumaotubiao23"></i>
<span class="areaName"></span>
</div>
<h3>echarts大数据图表样式demo</h3>
</div>
<div class="container-content">
<div class="top">
<div class="count-base">
<div class="com-count-title">资源总量构成</div>
<div class="com-screen-content">
<div id="main1" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
<div class="count-resource q1">
<div class="com-count-title">资源总量统计</div>
<div class="com-screen-content2">
<ul class="use-data">
<li>
<p class="data-count">15681 </p>
<span class="data-name">数据总量</span>
</li>
<li>
<p class="data-count"> 1731</p>
<span class="data-name">更新量</span>
</li>
<li>
<p class="data-count">11753</p>
<span class="data-name">共享次数</span>
</li>
</ul>
<div class="com-screen-content">
<div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="count-resource q2">
<div class="com-count-title">基础库统计</div>
<div class="com-screen-content">
<ul class="data-label">
<li class="active" data-type="1">法人库</li>
<li data-type="2">人口库</li>
<li data-type="3">电子证照库</li>
</ul>
<ul class="use-data"></ul>
<div id="main3" style="margin-top:10px;width:100%;height:240px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="mid">
<div class="count-share w1">
<div class="com-count-title">数据共享次数</div>
<div class="com-screen-content">
<div class="topRec_List">
<dl>
<dd>资源名称</dd>
<dd>调用方</dd>
<dd>调用时间</dd>
</dl>
<div class="maquee">
<ul>
<li>
<div>审计局主要职责</div>
<div>审计局</div>
<div>08:20:26 </div>
</li>
<li>
<div>残联主要职责</div>
<div>残联</div>
<div>08:20:36 </div>
</li>
<li>
<div>委老干部局主要职责</div>
<div>老干部局</div>
<div>08:20:46 </div>
</li>
<li>
<div>公安局主要职责</div>
<div>公安局</div>
<div>08:20:56</div>
</li>
<li>
<div>民政局主要职责</div>
<div>民政局</div>
<div>08:21:04</div>
</li>
<li>
<div>交通运输局主要职责</div>
<div>交通运输局</div>
<div>08:21:07</div>
</li>
</ul>
</div>
</div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
<div class="count-share w2">
<div class="com-count-title">数据共享次数</div>
<div class="com-screen-content">
<div id="main5" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="bottom">
<div class="count-topic e1">
<div class="com-count-title">主题库统计</div>
<div class="com-screen-content">
<div id="main6" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
<div class="count-topic e2">
<div class="com-count-title">主题库共享次数</div>
<div class="com-screen-content">
<div id="main7" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript">
/****** PLACE YOUR CUSTOM STYLES HERE ******/
var legal_person_data = {"uploadData":[{"count":630},{"count":986},{"count":792},{"count":642},{"count":521},{"count":573}
,{"count":832},{"count":747},{"count":983},{"count":836},{"count":831},{"count":633}],
"updateData":[{"count":110},{"count":181},{"count":123},{"count":197},{"count":123},{"count":173}
,{"count":123},{"count":151},{"count":101},{"count":152},{"count":101},{"count":177}],
"viewData":[{"count":651},{"count":842},{"count":223},{"count":223},{"count":221},{"count":812}
,{"count":928},{"count":219},{"count":613},{"count":254},{"count":981},{"count":301}]};
var people_data = {"uploadData":[{"count":1300},{"count":1686},{"count":1692},{"count":1742},{"count":1621},{"count":773}
,{"count":832},{"count":1047},{"count":1483},{"count":1336},{"count":831},{"count":973}],
"updateData":[{"count":103},{"count":281},{"count":203},{"count":197},{"count":173},{"count":154}
,{"count":223},{"count":251},{"count":201},{"count":252},{"count":201},{"count":277}],
"viewData":[{"count":651},{"count":842},{"count":223},{"count":223},{"count":221},{"count":812}
,{"count":928},{"count":219},{"count":613},{"count":254},{"count":981},{"count":301}]};
var picture_data = {"uploadData":[{"count":330},{"count":786},{"count":492},{"count":842},{"count":421},{"count":673}
,{"count":932},{"count":447},{"count":583},{"count":436},{"count":331},{"count":433}],
"updateData":[{"count":10},{"count":81},{"count":23},{"count":97},{"count":23},{"count":73}
,{"count":23},{"count":51},{"count":01},{"count":52},{"count":01},{"count":77}],
"viewData":[{"count":451},{"count":342},{"count":523},{"count":323},{"count":421},{"count":812}
,{"count":728},{"count":619},{"count":613},{"count":554},{"count":481},{"count":301}]};
var Tpl1 = '<li>' +
'<p class="data-count">5681</p>' +
'<span class="data-name">数据总量</span>' +
'</li>' +
'<li>' +
'<p class="data-count">1331</p>' +
'<span class="data-name">更新量</span>' +
'</li>' +
'<li>' +
'<p class="data-count">3753</p>' +
'<span class="data-name">共享次数</span>' +
'</li>' ;
var Tpl2 = '<li>' +
'<p class="data-count">3971</p>' +
'<span class="data-name">数据总量</span>' +
'</li>' +
'<li>' +
'<p class="data-count">1141</p>' +
'<span class="data-name">更新量</span>' +
'</li>' +
'<li>' +
'<p class="data-count">3753</p>' +
'<span class="data-name">共享次数</span>' +
'</li>' ;
var Tpl3 = '<li>' +
'<p class="data-count">4742</p>' +
'<span class="data-name">数据总量</span>' +
'</li>' +
'<li>' +
'<p class="data-count">1231</p>' +
'<span class="data-name">更新量</span>' +
'</li>' +
'<li>' +
'<p class="data-count">2983</p>' +
'<span class="data-name">共享次数</span>' +
'</li>' ;
$('.com-screen-content .use-data').html(Tpl1);
// 基于准备好的dom，初始化echarts实例
var myChart1= echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
//var myChart4 = echarts.init(document.getElementById('main4'));
var myChart5 = echarts.init(document.getElementById('main5'));
var myChart6 = echarts.init(document.getElementById('main6'));
var myChart7 = echarts.init(document.getElementById('main7'));
getNowFormatDate();
init_myChart1();
init_myChart2();
init_myChart3(legal_person_data);
init_myChart5();
init_myChart6();
init_myChart7();
function init_myChart3(data) {
var uploadCnt = [];
var updateCnt = [];
var viewCnt = [];
if (data.uploadData != null) {
for (var i = 0; i < data.uploadData.length; i++) {
uploadCnt.push(data.uploadData[i].count);
}
}
if (data.updateData != null) {
for (var i = 0; i < data.updateData.length; i++) {
updateCnt.push(data.updateData[i].count);
}
}
if (data.viewData != null) {
for (var i = 0; i < data.viewData.length; i++) {
viewCnt.push(data.viewData[i].count);
}
}
option = {
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var res = '';
for (var i = 0, l = params.length; i < l; i++) {
res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
}
return res;
},
transitionDuration: 0,
backgroundColor: 'rgba(83,93,105,0.8)',
borderColor: '#535b69',
borderRadius: 8,
borderWidth: 2,
padding: [5, 10],
axisPointer: {
type: 'line',
lineStyle: {
type: 'dashed',
color: '#ffff00'
}
}
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
itemGap: 10,
top: '16',
right: '10',
data: ['数据总量','共享次数','更新量'],
textStyle: {
fontSize: 14,
color: '#a0a8b9'
}
},
grid: {
top: '46',
left: '13%',
right: '10',
//bottom: '10%',
containLabel: false
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 0,
fontSize:14
},
axisLine: {
show: false,
lineStyle: {
color: '#a0a8b9'
}
},
axisTick: {
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
offset: 10
}],
yAxis: [{
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#a0a8b9'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#2b3646'
}
},
axisTick: {
show: false
}
}],
series: [{
name: '数据总量',
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 0.8,
color: 'rgba(137, 189, 27, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#1cc840'
}
},
data: uploadCnt
}, {
name: '共享次数',
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 0.8,
color: 'rgba(219, 50, 51, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#eb5690'
}
},
data: viewCnt
}, {
name: '更新量',
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 136, 212, 0.3)'
}, {
offset: 0.8,
color: 'rgba(0, 136, 212, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#43bbfb'
}
},
data: updateCnt
}
]
};
myChart3.setOption(option);
}
function init_myChart2() {
var data = {"uploadData":[{"count":3230},{"count":2986},{"count":3392},{"count":2642},{"count":3521},{"count":2573}
,{"count":3132},{"count":3147},{"count":3283},{"count":3336},{"count":3831},{"count":3633}],
"updateData":[{"count":310},{"count":281},{"count":123},{"count":97},{"count":323},{"count":373}
,{"count":423},{"count":451},{"count":501},{"count":452},{"count":201},{"count":177}],
"viewData":[{"count":1651},{"count":1842},{"count":2223},{"count":2123},{"count":2021},{"count":1812}
,{"count":1928},{"count":2019},{"count":2613},{"count":2754},{"count":2981},{"count":3001}]};
var uploadCnt = [];
var updateCnt = [];
var viewCnt = [];
if (data.uploadData != null) {
for (var i = 0; i < data.uploadData.length; i++) {
uploadCnt.push(data.uploadData[i].count);
}
}
if (data.updateData != null) {
for (var i = 0; i < data.updateData.length; i++) {
u.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0