详细描述见代码备注,具体问题是:
绘制这小图以后,再次使用新的数据绘制图表,倒数20之前的数据出现扭曲现象
配置项如下
option = {
title:{},
backgroundColor: '#fafbfc',
tooltip: {
trigger: 'axis'
},
legend: {
data: [],
top: '10%',
left: '10%',
},
grid: {
left: '10%',
right: '4%',
bottom: '13%',
top: '20%',
containLabel: true
},
toolbox: {
feature: {
/*saveAsImage: {}*/
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLine: {
lineStyle: {
color: '#888'
}
},
axisLabel: {
interval: 0,
rotate: 40,
fontSize:12,
}
},
yAxis: {
type: 'value',
minInterval: 1,
boundaryGap: [0,0.1],
axisLine: {
lineStyle: {
color: '#888'
}
}
},
dataZoom: [
{
show: true,
start: 50,
end: 100,
bottom : 18
},
{
type: 'inside',
start: 50,
end: 100
},
],
series: []
}
/*要用到的数据,index0是第一次,1是2秒后第二次绘制*/
xAxis=[
["16:15:00","16:15:03","16:15:06","16:15:09","16:15:12","16:15:15","16:15:18","16:15:21","16:15:24","16:15:27","16:15:30","16:15:33","16:15:36","16:15:39","16:15:42","16:15:45","16:15:48","16:15:51","16:15:54","16:15:57","16:16:00","16:16:03","16:16:06","16:16:09","16:16:12","16:16:15","16:16:18","16:16:21","16:16:24","16:16:27","16:16:30","16:16:33","16:16:36","16:16:39","16:16:42","16:16:45","16:16:48","16:16:51","16:16:54","16:16:57","16:17:00","16:17:03","16:17:06","16:17:09","16:17:12","16:17:15","16:17:18","16:17:21","16:17:24","16:17:27"],
["16:15:30","16:15:33","16:15:36","16:15:39","16:15:42","16:15:45","16:15:48","16:15:51","16:15:54","16:15:57","16:16:00","16:16:03","16:16:06","16:16:09","16:16:12","16:16:15","16:16:18","16:16:21","16:16:24","16:16:27","16:16:30","16:16:33","16:16:36","16:16:39","16:16:42","16:16:45","16:16:48","16:16:51","16:16:54","16:16:57","16:17:00","16:17:03","16:17:06","16:17:09","16:17:12","16:17:15","16:17:18","16:17:21","16:17:24","16:17:27","16:17:30","16:17:33","16:17:36","16:17:39","16:17:42","16:17:45","16:17:48","16:17:51","16:17:54","16:17:57"]
]
legend=[
["oms"],["oms"]
]
series=[
[{"name":"oms","type":"line","data":[41,40,40,41,40,41,41,40,41,41,40,41,41,38,41,39,39,40,39,39,40,40,38,40,40,40,39,39,39,39,41,39,39,41,39,39,39,39,38,40,39,40,39,39,40,37,39,40,38,140],"smooth":true}]
,
[{"name":"oms","type":"line","data":[40,41,41,38,41,39,39,40,39,39,40,40,38,40,40,40,39,39,39,169,41,309,39,41,39,39,39,39,38,190,39,60,39,109,40,37,39,40,38,60,40,39,39,40,40,39,39,39,40,40],"smooth":true}]
]
/*两秒钟后重新绘制,折线扭曲*/
setTimeout(function (){
myChart.clear()
option.xAxis.data=xAxis[1]
option.legend.data=legend[1]
option.series=series[1]
myChart.setOption(option);
console.log(option.series[0])
}, 2000);
/*赋值后绘制*/
option.xAxis.data=xAxis[0]
option.legend.data=legend[0]
option.series=series[0]
myChart.setOption(option)
console.log(option.series[0])