在ie11下是整个图表刷新,而在chrome和火狐下是数据局部刷新,这是为什么
配置项如下
var xData = [];
var yData = [];
var now;
var value;
function randomData() {
now = new Date();
value = Math.ceil(Math.random() * 10) + 27;
return {
name: [now.getHours(), now.getMinutes(), now.getSeconds()].join(':'),
value: value
}
}
for (var i = 0; i < 15; i++) {
var ran = randomData();
xData.push(ran.name);
yData.push(ran.value);
}
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function(params) {
chartClick(2, params);
});
myChart2.setOption({
title: {
text: '环境温度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度', '警戒值', '下限值'],
x: 'right'
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [{
name: '温度',
type: 'line',
data: yData,
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}, {
name: '警戒值',
type: 'line',
data: [35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35, 35],
symbol: 'none'
}, {
name: '下限值',
type: 'line',
data: [-2, -2, -2, -2, -2, -2, -2, -2, -2, -2, -2, -2, -2, -2, -2],
symbol: 'none'
}]
});
setInterval(function() {
var ran = randomData();
xData.shift();
yData.shift();
xData.push(ran.name);
yData.push(ran.value);
var option = myChart2.getOption();
option.xAxis[0].data = xData;
option.series[0].data = yData;
myChart2.setOption(option);
}, 5000);