版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaoye319/article/details/89453456
最近工作中让完成一个实时大屏的东西，就是类似于电商实时数据成交数据的那种大屏，调研了一下，大致有两种方案可以实现，一、使用别人已开发的集成化方案，例如阿里的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.75
zoom: 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+";");
}
最后展示一下具体的效果图：
源码请访问：点这里