美文网首页
ECharts 图表无法重渲染问题

ECharts 图表无法重渲染问题

作者: cythia_yyy | 来源:发表于2021-03-04 21:29 被阅读0次

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

    相关文章

      网友评论

          本文标题:ECharts 图表无法重渲染问题

          本文链接:https://www.haomeiwen.com/subject/afzkqltx.html