JS+Echarts制作实时大屏

最近工作中让完成一个实时大屏的东西，就是类似于电商实时数据成交数据的那种大屏，调研了一下，大致有两种方案可以实现，一、使用别人已开发的集成化方案，例如阿里的DataV；二、使用JS+Echarts。但是由于后期可能只是内网的环境，所以只能使用JS+Echarts来实现了。

上具体的代码之前先大致讲一下相关的实现方案，Echarts大家百度一下就应该知道了，是百度研发开源的一套可视化图表，可以满足我们的需求，具体介绍自己搜一下就知道了。然后就是怎么做到实时，如果使用集成化方案，那些方案底层的技术架构支持实时读取数据库的数据，性能还高，但是如果使用js的话只能用setInterval定时请求数据库了，如果有更好的方案可以给我留言。

下面就是具体的代码了，

html:

<body>
<div class="wpbox"><div class="bnt"><div class="topbnt_left fl"><ul></ul></div><div class=" fr topbnt_right"><ul></ul></ul></div></div><!-- bnt end --><div class="left1"><div class="aleftboxttop pt1"><h2 class="tith2">两日内最高温湿度统计对比</h2><div class="tlbox"><ul><li><p class="text"><span class="w12">温度:</span><span id="yesterday1"></span><span id="today1"></span><span class="tr" id="tmpGap"></span></p><p class="rwith"><span class="rwith_img" id="ratio1"></span></p></li><li><p class="text"><span class="w12">湿度:</span><span id="yesterday2"></span><span id="today2"></span><span class="tr" id="humGap"></span></p><p class="rwith bgc2"><span class="rwith_img qgc2" id="ratio2"></span></p></li></ul></div></div><div class="aleftboxtmidd"><h2 class="tith2 pt2">两日内最高大气压强和光强统计对比</h2><div class="tlbox"><ul><li><p class="text"><span class="w12">大气压强:</span><span id="yesterday3"></span><span id="today3"></span><span class="tr" id="pressGap"></span></p><p class="rwith"><span class="rwith_img" id="ratio3"></span></p></li><li><p class="text"><span class="w12">光强:</span><span id="yesterday4"></span><span id="today4"></span><span class="tr" id="lightGap"></span></p><p class="rwith bgc2"><span class="rwith_img qgc2" id="ratio4"></span></p></li></ul></div></div><div class="aleftboxtbott"><h2 class="tith2">设备类型统计</h2><div id="deviceType" class="aleftboxtbott_cont2" ></div></div></div><!--  left1 end --><div class="mrbox"><div class="mrbox_topmidd" style="width: 69%;"><div class="amiddboxttop"><h2 class="tith2 pt1">实时地图</h2><div class="hot_map" id="hot_map"></div></div><!--  amiddboxttop end--><div class="amidd_bott"><div class="amiddboxtbott1 fl" ><h2 class="tith2 pt1">七日内每日平均温度线型统计</h2><div id="tempertureStatistics" class="amiddboxtbott1content2" ></div></div><div class="amiddboxtbott2 fl"><h2 class="tith2 pt1">七日内每日平均光强线型统计</h2><div id="lightStatistics" class="amiddboxtbott2content"></div></div></div><!-- amidd_bott end --></div><!-- mrbox_top end --><div class="mrbox_top_right"><div class="arightboxtop"><h2 class="tith2">每日数据量统计对比</h2><div id="deviceTypeDateCount"  class="aleftboxtbott_contr"></div></div><div class="arightboxbott"><h2 class="tith2 ">空气含量统计</h2><div id="airType" class="arightboxbottcont2"></div></div></div><!-- mrbox_top_right end --></div></div>
</div>
</body>

然后是js:

$(function () {refresh();//开始定时刷新setInterval(refresh, 5*1000);
});
function refresh() {//设备类型统计var myChart1 = echarts.init(document.getElementById('deviceType'));$.getJSON(ctx + "screen/queryCountForDefine", function(data1) {if(data1.code == 0){option1 = {color:['#4d72d9','#76c4bf','#e5ffc7','#f1b1ff'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:60,right:60,top:20,bottom:0,containLabel: true},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {left: 10,top: 5,textStyle:{fontSize:10,color:'rgba(255,255,255,.6)'},data: ['A','B','C','D']},calculable : true,series : [{name:'设备类型',type:'pie',radius : [20, 70],center : ['50%', '55%'],roseType : 'area',labelLine: {normal: {length: 1,//设置延长线的长度}},data:function () {var data = [];for (var i = 0;i < data1.msg.length;i++) {data.push({value: data1.msg[i].count,name: data1.msg[i].name});}return data;}()}]};myChart1.setOption(option1);}else{$MB.n_danger(data1.msg);}});//空气含量统计var myChart2 = echarts.init(document.getElementById('airType'));option2 = {color:['#aae3fb','#e5ffc7', '#5578cf'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:60,right:60,top:20,bottom:0,containLabel: true},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {d}%"},legend: {left: 10,top: 5,textStyle:{fontSize:10,color:'rgba(255,255,255,.6)'}},calculable : true,series : [{name:'空气含量',type:'pie',radius : [20, 70],center : ['50%', '55%'],roseType : 'area',data:[{value:187650, name:'O2'},{value:135896, name:'CO2'},{value:105896, name:'其它'}]}]};myChart2.setOption(option2);//不同设备类型每日数据量统计对比var myChart3 = echarts.init(document.getElementById('deviceTypeDateCount'));$.getJSON(ctx + "screen/queryCountForData", function(data3) {if(data3.code == 0){option3 = {color:['#7ecef4'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:20,right:50,top:23,bottom:30,containLabel: true},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} (条)"},xAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,0)'}},axisLabel:{color:"rgba(255,255,255,1)"},boundaryGap: [0, 0.01]},yAxis: {type: 'category',axisLine:{lineStyle:{color:'rgba(255,255,255,.5)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.5)"},data: ['温度','湿度','CO2','light','pressure']},series: [{name: '每日实时数据量',type: 'bar',barWidth :30,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1,[{offset: 0, color: 'rgba(230,253,139,.7)'},{offset: 1, color: 'rgba(41,220,205,.7)'}])}},data:function () {var data = [];for (var i = 0;i < data3.msg.length;i++) {data.push(data3.msg[i].dataCount);}return data;}()}]};myChart3.setOption(option3);}else{$MB.n_danger(data3.msg);}});//七日内每日平均温度线型统计var myChart4 = echarts.init(document.getElementById('tempertureStatistics'));$.getJSON(ctx + "screen/queryAvgDataForDay?type=0&limit=7", function(data4) {if(data4.code == 0){option4 = {color:['#00ffff','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a',  '#00b7ee', '#81dabe','#5fc5ce'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left: '5%',right: '8%',bottom: '7%',top:'8%',containLabel: true},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} (°C)"},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.7)"},data: function () {var data = [];for (var i = data4.msg.length - 1;i >= 0;i--) {data.push(data4.msg[i].time.replace("2019-",""));}return data;}()},yAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.7)"},},series: [{name:'每日平均温度',type:'line',stack: '总量',smooth: true,data: function () {var data = [];for (var i = data4.msg.length - 1;i >= 0;i--) {data.push(data4.msg[i].avgValue);}return data;}()}]};myChart4.setOption(option4);}else{$MB.n_danger(data4.msg);}});//七日内每日平均光强线型统计var myChart6 = echarts.init(document.getElementById('lightStatistics'));$.getJSON(ctx + "screen/queryAvgDataForDay?type=3&limit=7", function(data6) {if(data6.code == 0){option6 = {color:['#00ffff','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a',  '#00b7ee', '#81dabe','#5fc5ce'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left: '5%',right: '8%',bottom: '7%',top:'8%',containLabel: true},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} (cd)"},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.7)"},data: function () {var data = [];for (var i = data6.msg.length - 1;i >= 0;i--) {data.push(data6.msg[i].time.replace("2019-",""));}return data;}()},yAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.7)"},},series: [{name:'每日平均光强',type:'line',stack: '总量',areaStyle: {normal: {}},data: function () {var data = [];for (var i = data6.msg.length - 1;i >= 0;i--) {data.push(data6.msg[i].avgValue);}return data;}()}]};myChart6.setOption(option6);}else{$MB.n_danger(data6.msg);}});//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象var mapChart7 = echarts.init(document.getElementById('hot_map'));// mapChart的配置$.getJSON(ctx + "screen/queryProvinceDeviceCount", function(data7) {if (data7.code == 0) {var option7 = {tooltip: {trigger: 'item',formatter:function (params) {if(params.value){return params.name + ' : '+params.value +" (个)";}else{return params.name + ' : 0 (个)';}}},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 0,max: 15,text:['高','低'],realtime: false,calculable: true,inRange: {color:  ['#50a3ba', '#eac736', '#d94e5d']}},series:[{type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型map: 'china', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京aspectScale: 0.75, //长宽比. default: 0.75zoom: 1.2,data: function () {var data = [];for (var i = 0;i < data7.msg.length ;i++) {var provinceName;if(data7.msg[i].provinceName.endsWith("省") || data7.msg[i].provinceName.endsWith("市")){provinceName = data7.msg[i].provinceName.substring(0,data7.msg[i].provinceName.length -1);}else if(data7.msg[i].provinceName == '内蒙古自治区'){provinceName = data7.msg[i].provinceName.substring(0,3);}else if(data7.msg[i].provinceName.endsWith("自治区")){provinceName = data7.msg[i].provinceName.substring(0,2);}else{provinceName = data7.msg[i].provinceName;}data.push({name: provinceName,value: data7.msg[i].count});}return data;}()}]};//设置图表的配置项mapChart7.setOption(option7);}else{$MB.n_danger(data7.msg);}});//两日内最高温湿度统计对比$.getJSON(ctx + "screen/queryAvgDataForDay?type=0&limit=2", function(data8) {if(data8.code == 0){$.getJSON(ctx + "screen/queryAvgDataForDay?type=1&limit=2", function(data9) {if (data9.code == 0) {//温度的两日对比compare(data8.msg[1].maxValue,data8.msg[0].maxValue,"yesterday1","today1","tmpGap","ratio1");//湿度的两日对比compare(data9.msg[1].maxValue,data9.msg[0].maxValue,"yesterday2","today2","humGap","ratio2");} else {$MB.n_danger(data9.msg);}});}else{$MB.n_danger(data8.msg);}});//两日内最高大气压强和光强统计对比$.getJSON(ctx + "screen/queryAvgDataForDay?type=4&limit=2", function(data10) {if(data10.code == 0){$.getJSON(ctx + "screen/queryAvgDataForDay?type=3&limit=2", function(data11) {if (data11.code == 0) {//大气压强的两日对比compare(data10.msg[1].maxValue,data10.msg[0].maxValue,"yesterday3","today3","pressGap","ratio3");//光强的两日对比compare(data11.msg[1].maxValue,data11.msg[0].maxValue,"yesterday4","today4","lightGap","ratio4");} else {$MB.n_danger(data11.msg);}});}else{$MB.n_danger(data10.msg);}});
}/*** 柱形图对比* @param yesVal 昨日的数据* @param todayVal 今日的数据* @param yesSpanName 昨日的span的id* @param todaySpanName 今日的span的id* @param gapName 升降的span的id* @param ratioName 比例的span的id*/
function compare(yesVal,todayVal,yesSpanName,todaySpanName,gapName,ratioName) {var yester = yesVal.toFixed(2);var today = todayVal.toFixed(2);var total = Number(today) + Number(yester);var diff1 = (Number(today) - Number(yester)).toFixed(2);var diff2 = (Number(yester) - Number(today)).toFixed(2);if(yesSpanName == 'yesterday1' || yesSpanName == 'yesterday3'){$("#"+yesSpanName).html("<i class='ricon1'></i>昨日:"+yester);$("#"+todaySpanName).html("<i class='tricon1'></i>今日:"+today);}else{$("#"+yesSpanName).html("<i class='ricon2'></i>昨日:"+yester);$("#"+todaySpanName).html("<i class='tricon2'></i>今日:"+today);}if(Number(diff1) >= 0){$("#"+gapName).html("<img src='../../../../../img/screen/iconup.png' height='16'/>"+diff1);}else{$("#"+gapName).html("<img src='../../../../../img/screen/icondown.png' height='16'/>"+diff2);}//昨日/(昨日+今日)算图形的比率var ration = (yester / total).toFixed(2)*100+'%';$("#"+ratioName).attr("style","width:"+ration+";");
}

最后展示一下具体的效果图：

源码请访问：点这里

JS+Echarts制作实时大屏相关推荐

使用百度echarts制作可视化大屏
先看一下效果图(部分) 我们现在就来完成这个第一个环形进度条. 1.下载百度echarts和jquery,添加到你的页面中: <script language="javascript& ...
echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
使用百度echarts制作可视化大屏——最终效果和动态数据刷新
最终效果如下图: 接下来就是数据动态刷新了,这个没什么好说的,就是一个$.post的事,传递一个json给自定义的refresh函数就行了. $.post(url,null,function(d){ ...
Python机器学习---Pyecharts制作可视化大屏
文章目录 Pyecharts可视化 Map世界地图柱状图.饼图 Pyecharts组合图表 ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而Pyecharts则 ...
超简单，用Python Pyecharts制作可视化大屏
经常有小伙伴问,如何制作数据可视化大屏? 今天主要详细讲一下Pyecharts制作可视化大屏. 注意,本文由于篇幅问题不会放置全部代码,会在提供文末全部代码的下载. ECharts是由百度开源的基于J ...
pyecharts+flask制作数据大屏-进阶
去年整理了个pyecharts+flask制作数据大屏的基础版,事情比较多,一直没时间进一步完善.这篇进阶版是基于上篇的基础上,说明如何实现一个功能完整的数据大屏. 注:本人对CSS和JS并不熟悉,只 ...
Echarts + Web实现大屏展示效果
Echarts + Web实现大屏展示效果,实现数据可视化,大屏显示效果,用echarts插件实现文件:590m.com/f/25127180-486877235-f5ca5a (访问密码:5516 ...
新一代开源数据可视化开放平台，是如何做实时大屏/报表的？
先看两张简单配置的习作 datart 实时大屏--决策驾驶舱 datart--生产大屏上面是在国产开源的数据可视化 datart 上简单配置的两个实时大屏,截图展现不出来交互的效果,下面传一段视频: ...
Python制作可视化大屏（东京奥运会）
目录文章目录前言一.数据爬取二.数据预处理三.Pyecharts可视化 3.1 2020东京奥运会各国金牌分布图 3.2 2020东京奥运会奖牌榜详情 3.3 2020东京奥运会中国各项目获 ...

JS+Echarts制作实时大屏

JS+Echarts制作实时大屏相关推荐

最新文章

热门文章