echarts之Error: Initialize failed: invalid dom.

  • Post author:
  • Post category:其他


  • 问题截图:
  • 产生原因:进入图表页后调用获取图表数据接口,接口未返回数据时就跳离图表页,而后数据返回并创建图表,但跳离了图表页就获取不到容器元素,因此报错并且创建图表失败。
  • 解决方案:

    1. 不使用原生js方法获取容器元素(例如:document.getElementById()),改用this.$refs。
    2. 如果图表页是缓存页,并希望跳回图表页后图表能加载好,则需要在图表容器的行内样式中写好容器的宽高(以px为单位)。(对于缓存页也提供另外一种解决思路:在组件的

      activated

      生命周期执行创建图表方法)
  • 示例代码:

    <div ref="chinaMapChart" style="width: 770px; height: 560px" />
    
    --- 分割线 ---
    
    const myChart = echarts.init(this.$refs.chinaMapChart)



版权声明:本文为m0_60692814原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。