echarts删除数据时,页面不更新

390 阅读1分钟

新增数据时没有问题,但是删除折线时,使用setOption()设置了要更改的数据之后 发现echarts里面的legend更新了 但是series没有更新

解决方法

setOption第二个参数设置为true可解决问题 但要注意可能会导致echarts原有其他内容也都没有了。所以在更改时除了要修改的内容外 还要加上之前的

 const currentOption = chartInstance.value.getOption()
 const newOption = {
      ...currentOption,//这个要加上 否则会只有series和legend的
      series: currentSeries,//新的数据
      legend: {
         ...currentLegend,
        data: currentLegend.data,//新数据
      },
    }
 chartInstance.value.setOption(newOption, true)
    
- chart.setOption(option, notMerge, lazyUpdate);
  • notMerge:可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。
  • lazyUpdate:可选。在设置完 option 后是否不立即更新图表,默认为 false,即同步立即更新。如果为 true,则会在下一个 animation frame 中,才更新图表。

image.png

image.png

详: echarts.apache.org/zh/api.html…