我的图表中总共有3个系列。而且我想编写一个计时器,以便每秒钟更新一次该系列中的两个而不刷新第三个系列,因为该系列中的数据太多。
我已经尝试过“ setOption()”函数,但是在调用该函数之后,所有系列都被刷新,而且速度太慢。 因此,如何只刷新系列中的两个而不刷新上一个 ?
/*below is the original settings*/
async getFuelmap () {
var res = await
axios.get('http://localhost:8080/static/map.json')
this.fuelmap = res.data.result.map(function (item) {
return [item['j'], item['i'], item['fc'].toFixed(2)]
})
var mapBox = document.getElementsByClassName('mapbox')[0]
mapBox.style.width = '350px'
mapBox.style.height = '350px'
var fuelmapElement = document.getElementById('fuelmap')
fuelmapElement.style.width = mapBox.style.width
fuelmapElement.style.height = mapBox.style.height
this.mapChart = echarts.init(fuelmapElement)
var optionFuelmap = {
title:{
text: 'map'
},
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '80%',
y: '10%'
},
xAxis: {
type: 'category',
data: this.speedList,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: this.torqueList,
splitArea: {
show: true
},
},
visualMap: [
{
min: 0,
max: 1,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
show: false,
seriesIndex: [0],
},
{
left: 'right',
top: '10%',
dimension: 2,
min: 0,
max: 1,
calculable: false,
show: false,
precision: 0.1,
inRange: {
symbolSize: [10,20]
},
seriIndex:[1,2]
}
],
series: [
{
name: 'map',
type: 'heatmap',
data: this.fuelmap,
label: {
show: false,
normal: {
show: false
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name:'before',
type:'scatter',
color:'red',
data:this.beforePoint,
},
{
name:'after',
type:'scatter',
color:'blue',
data:this.afterPoint,
}
]
}
this.mapChart.setOption(optionFuelmap)
}
/*below is the timer*/
setInterval(() => {
this.mapChart.setOption({
series:[
{
/*I don't want to refresh this plot*/
},
{
name: 'before',
data: [[torqueBeforePos, speedBeforePos,this.fuelBefore]]
},
{
name: 'after',
data: [[torqueAfterPos, speedAfterPos, this.fuelAfter]]
}
]
})
}, this.interval);
所有系列均已更新...