地址:https://echarts.apache.org/handbook/zh/how-to/data/dynamic-data
var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
date.push(now);
data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
if (shift) {
date.shift();
data.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
addData();
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value'
},
series: [
{
name: '成交',
type: 'line',
smooth: true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [
{
name: '成交',
data: data
}
]
});
}, 500);
解析
数据更新通过setInterval()方法实现
setInterval()方法
- setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
- 提示: 500 毫秒= 0.5 秒。
被setInterval()调用的方法
- myChart.setOption()方法
- myChart.setOption()方法会更新图表,
- 而数据会在ddData被调用时更新
- 数据的改变会驱动图表展现的改变
- addData()方法
- addData()方法每被调用一次就会更新一次data
- data的更新包括data和date
- data对应表中具体的数据
- date对应x轴的横坐标