ECharts 图表无法重渲染问题

2021-03-04  本文已影响0人  cythia_yyy

ECharts V5.0.1
Vue V3.0.2

场景:A 页面(含图表),进入 B 页面,再回退到 A (A')页面,页面刷新但是图表没有渲染内容

普通情况下问题排查:

  1. 确认一下挂载图表的节点宽高是否正确,否即可能是节点没生成时渲染图表
  2. 宽高正确,把数据写死,确认一下是否是空数据

另外一个本次遇到的情况
节点和数据都正常,但是图表没有重新渲染
默认 echart 会在挂载图表的DOM元素上添加 _echarts_instance_ 属性作为图表 id
如果页面在 A 和 A' 中的_echarts_instance_ 属性值相同,则说明是图表默认没有更新,不需要重渲染,此时 EchartInstance.resize/dispose 方法也都无效。

正确的workaround

document.getElementById('line-chart')?.removeAttribute('_echarts_instance_');
...

lineChart = echarts.init(document.getElementById('line-chart') as HTMLDivElement);
...
lineChart.setOption(***);

上一篇下一篇

猜你喜欢

热点阅读