版权声明:本文为章鱼哥原创文章,若要转载,请注明出处 https://blog.csdn.net/qq_40388552/article/details/85066963
效果图:实现效果图数据实时更新,折线图随着时间不断变化
核心代码
//折线图数据
var data = [
{ name: '2018/01/01 00:00:10', value: ['2018/01/01 00:00:10', 30] },
{ name: '2018/01/01 00:10:10', value: ['2018/01/01 00:10:10', 35] },
{ name: '2018/01/01 00:20:10', value: ['2018/01/01 00:20:10', 32] },
{ name: '2018/01/01 00:30:10', value: ['2018/01/01 00:30:10', 40] },
{ name: '2018/01/01 00:40:10', value: ['2018/01/01 00:40:10', 50] },
{ name: '2018/01/01 00:50:10', value: ['2018/01/01 00:50:10', 38] },
{ name: '2018/01/01 01:50:10', value: ['2018/01/01 01:50:10', 31] },
{ name: '2018/01/01 02:50:10', value: ['2018/01/01 02:50:10', 45] },
{ name: '2018/01/01 03:50:10', value: ['2018/01/01 03:50:10', 42] },
{ name: '2018/01/01 04:50:10', value: ['2018/01/01 04:50:10', 46] },
{ name: '2018/01/01 05:50:10', value: ['2018/01/01 05:50:10', 44] },
{ name: '2018/01/01 06:50:10', value: ['2018/01/01 06:50:10', 38] },
{ name: '2018/01/01 07:50:10', value: ['2018/01/01 07:50:10', 32] },
{ name: '2018/01/01 10:50:10', value: ['2018/01/01 10:50:10', 45] },
{ name: '2018/01/01 11:50:10', value: ['2018/01/01 11:50:10', 10] },
{ name: '2018/01/01 12:50:10', value: ['2018/01/01 12:50:10', 56] },
{ name: '2018/01/01 14:50:10', value: ['2018/01/01 14:50:10', 44] },
{ name: '2018/01/01 15:50:10', value: ['2018/01/01 15:50:10', 38] },
{ name: '2018/01/01 16:50:10', value: ['2018/01/01 16:50:10', 32] },
];
//x轴坐标数据
var xData = [
{ name: '2018/01/01 00:00:00', value: ['2018/01/01 00:00:00', 0] },
{ name: '2018/01/01 00:00:00', value: ['2018/01/01 23:59:59', 0] }
];
option = {
xAxis: {
type: 'time',
splitNumber: 7, //可以通过它控制x轴显示的坐标轴的数量
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
//min: 1, //当每条数据之间相差很小,折线图波动不明显时,我们可以设置最小值。
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
type: 'line',
showSymbol: false,
data: xData,
itemStyle: { normal: { opacity: 0 } },
lineStyle: { normal: { opacity: 0 } }
}
]
};
这里的数据我是写死的,当然你用的话,是要接入真实数据的,接入数据的方式懒得写了,有什么需要问的,欢迎留言交流。