在Echarts中,如何在不刷新其他系列的情况下更新其中一个系列?

时间:2019-06-16 18:21:53

标签: javascript echarts

我的图表中总共有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);

所有系列均已更新...

0 个答案:

没有答案