xAxis:
xAxis: [ { type: 'category', boundaryGap: true, data: (function (){ var now = new Date(); var res = []; var len = 10; while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/,'')); now = new Date(now - 2000); } return res; })() }, { type: 'category', boundaryGap: true, data: (function (){ var res = []; var len = 10; while (len--) { res.push(10 - len - 1); } return res; })() } ],
series:
series: [ { name: '预购队列', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: (function (){ var res = []; var len = 10; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; })() }, { name: '最新成交价', type: 'line', data: (function (){ var res = []; var len = 0; while (len < 10) { res.push((Math.random()*10 + 5).toFixed(1) - 0); len++; } return res; })() } ]
定时刷新数据:
app.count = 11; setInterval(function (){ var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ''); var data0 = option.series[0].data; var data1 = option.series[1].data; data0.shift(); data0.push(Math.round(Math.random() * 1000)); data1.shift(); data1.push((Math.random() * 10 + 5).toFixed(1) - 0); option.xAxis[0].data.shift(); option.xAxis[0].data.push(axisData); option.xAxis[1].data.shift(); option.xAxis[1].data.push(app.count++); myChart.setOption(option); }, 2100);
案例参考官方:https://www.echartsjs.com/examples/zh/editor.html?c=dynamic-data