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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0