ECharts 图表无法重渲染问题
2021-03-04 本文已影响0人
cythia_yyy
ECharts V5.0.1
Vue V3.0.2
场景:A 页面(含图表),进入 B 页面,再回退到 A (A')页面,页面刷新但是图表没有渲染内容
普通情况下问题排查:
- 确认一下挂载图表的节点宽高是否正确,否即可能是节点没生成时渲染图表
- 宽高正确,把数据写死,确认一下是否是空数据
另外一个本次遇到的情况
节点和数据都正常,但是图表没有重新渲染
默认 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(***);