echart实时量展示折线图
程序员文章站
2024-03-19 23:19:22
...
JS+Vue页面开发（一） —— Echart折线图展示（实时量动态展示）
最近使用echart画图，将官网给出的demo修改用于实际需要，主要是一个可选择区间动态展示的折线图：
Echart.js
echart的功能还是很强大的，可以绘制出各种图像，而且也比较方便使用，官网有很多例子，具体请参考官网，只需要对option进行修改，官网上有各个参数的说明，将参数改成需要的内容。echart官网提供动态折线图的example，具体请参考动态折线图。
使用echart需要下载echart.js，官网提供下载，这里下载的是echarts.min.js。
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随时间变化折线图</title>
<script src="../javascripts/echarts.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div id="line-style" style="float:left;font-size: large">请选择实时展示区段：</div>
<form action="" name="f1" style="text-align:left">
<select id="time"action="" onchange="select_time()">
<option value=0 selected="selected">2小时</option>
<option value=1>10小时</option>
<option value=2>24小时</option>
<option value=3>test</option>
</select>
</form>
<div id ="line" style="width: 100%;height: 300px"></div>
</div>
</div>
</div>
</div>
<script src="../javascripts/line.js" type="text/javascript"></script>
</body>
</html>JS代码
`use strict`
var myChart3 = echarts.init(document.getElementById('line'));//初始化折线图
var data = { areas:['A','B','C','D'],
stats:[ {
name: 'A',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
cache:[]
},
{
name: 'B',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
cache:[]
},
{ name:'C',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
cache:[]} ,
{ name:'D',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [],
cache:[]}
] };
var date = [];//时间数据数组
var value_A = 1000;
var value_B = 2000;
var value_C = 3000;
var value_D = 4000;
function randomData_B() {
var now = new Date();
value_B = value_B + Math.random() * 50;
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if(hours < 10)//对时分秒进行判断，返回值为一位数的将其补充为两位数，美观
hours = "0"+hours;
if(minutes < 10)
minutes = "0"+minutes;
if(seconds < 10)
seconds = "0"+seconds;
return {
value: [ [hours,minutes,seconds].join(':'),
Math.round(value_B)]
}
}
function randomData_A() {
var now = new Date();
value_A = value_A + Math.random() * 100;
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if(hours < 10)
hours = "0"+hours;
if(minutes < 10)
minutes = "0"+minutes;
if(seconds < 10)
seconds = "0"+seconds;
return {
value: [ [hours,minutes,seconds].join(':'),
Math.round(value_A)]
}
}
function randomData_C() {
var now = new Date();
value_C = value_C + Math.random() * 30;
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if(hours < 10)
hours = "0"+hours;
if(minutes < 10)
minutes = "0"+minutes;
if(seconds < 10)
seconds = "0"+seconds;
return {
value: [ [hours,minutes,seconds].join(':'),
Math.round(value_C)]
}
}
function randomData_D() {
var now = new Date();
value_D = value_D + Math.random() * 60;
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if(hours < 10)
hours = "0"+hours;
if(minutes < 10)
minutes = "0"+minutes;
if(seconds < 10)
seconds = "0"+seconds;
return {
value: [ [hours,minutes,seconds].join(':'),
Math.round(value_D)]
}
}
var years;//当前时间年月日，用于展示当前日期
var months;
var days;
//函数获取当前日期，年月日
function getToday(){
var now = new Date();
years = now.getFullYear();
months = now.getMonth() + 1;
days = now.getDate();
}
getToday();
//折线图的option参数配置，x轴为当前时间（时分秒），y轴为随机值
option_line = {
title: {
text: '实时量'+'('+years+'年'+months+'月'+days+'日'+')',
x:'center',
textStyle: {//teststyle调整字体格式及大小
"fontSize": 24
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['A', 'B','C','D'],
x:'right',
textStyle: {
"fontSize": 18
}
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
fontSize:'18'
},
data:date
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
fontSize:'18'
}
},
splitLine: {
show: false
}
},
series: data.stats
};
var time=1440;
var pre_time=1440;
var value = 1440;
function update(value) {
getToday();
if(value != null)//根据value值设置展示数据的条数
{
if (value == 0)
time = 1440;
else if(value == 1)
time = 7200;
else if(value == 2)
time = 17280;
else if(value == 3)
time = 10;
}
if(data.stats.length>0 && data.stats[0].data.length > time)//如果大于展示区段的条数，则进行shift操作
{
var now_length = data.stats[0].data.length - time;//当前数组中数量
if(pre_time>time){
for(var i =0;i<now_length;i++){
for(var j=0;j<data.stats.length;j++)
data.stats[j].data.shift();
date.shift();
}
}
else{
for(var j=0;j<data.stats.length;j++)
data.stats[j].data.shift();
date.shift();
}
}
pre_time = time;//记录前一次调整时选择的展示区段
myChart3.setOption({//更新title，xAxis和series的数据
title: {
text: '实时数据量'+'('+years+'年'+months+'月'+days+'日'+')',
x:'center',
textStyle: {
"fontSize": 24
}
},
xAxis: {
data: date
},
series: data.stats
});
};
function select_time(){
value = $("#time").val();
update(value);
}//前端提供展示区段的选择，传递到后端value值
//每5秒钟重复执行函数，更新数据并更新折线图
setInterval(function () {
var _data_B = randomData_B();
var _data_A = randomData_A();
var _data_C = randomData_C();
var _data_D = randomData_D();
getToday();
if(value != null)//根据value值设置展示数据的条数
{
if (value == 0)
time = 1440;
else if(value == 1)
time = 7200;
else if(value == 2)
time = 17280;
else if(value == 3)
time = 10;
}
pre_time = time;//记录前一次调整时选择的展示区段
data.stats[0].data.push(_data_B);//每一次数组里新增一条数据
data.stats[1].data.push(_data_A);
data.stats[2].data.push(_data_C);
data.stats[3].data.push(_data_D);
date.push(_data_B.value[0]);
myChart3.setOption({//更新title，xAxis和series的数据
title: {
text: '实时量'+'('+years+'年'+months+'月'+days+'日'+')',
x:'center',
textStyle: {
"fontSize": 24
}
},
xAxis: {
data: date
},
series: data.stats
});
}, 5000);
myChart3.setOption(option_line);
效果图
上一篇： 快速回顾 MySQL：数据库和表操作
下一篇： Echarts中dataZoom的使用
推荐阅读