ECharts 图表无法重渲染问题

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(***);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容