echarts之Error: Initialize failed: invalid dom.

菜菜捞捞

 关注

阅读 68

2022-02-17

  • 问题截图：
  • 产生原因：进入图表页后调用获取图表数据接口，接口未返回数据时就跳离图表页，而后数据返回并创建图表，但跳离了图表页就获取不到容器元素，因此报错并且创建图表失败。
  • 解决方案：
    1. 不使用原生js方法获取容器元素（例如：document.getElementById()），改用this.$refs。
    2. 如果图表页是缓存页，并希望跳回图表页后图表能加载好，则需要在图表容器的行内样式中写好容器的宽高（以px为单位）。（对于缓存页也提供另外一种解决思路：在组件的activated生命周期执行创建图表方法）
  • 示例代码： 
    <div ref="chinaMapChart" style="width: 770px; height: 560px" />

--- 分割线 ---

const myChart = echarts.init(this.$refs.chinaMapChart)

相关推荐

关于解决“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘和Initialize failed: invalid

慎壹 30 0 0

Error: Port Library failed to initialize: -86

Alex富贵 53 0 0

ubuntu 24.04 : Failed to initialize NVML: Unknown Error

小猪肥 36 0 0

Docker中Failed to initialize NVML: Unknown Error

雨鸣静声 81 0 0

消除There is a chart instance already initialized on the dom. React中使用echarts

想溜了的蜗牛 100 0 0

nvidia-docker Failed to initialize NVML: Unknown Error

云卷云舒xj 23 0 0

sbin/mount.vboxsf: mounting failed with the error: Invalid argument

黎轩的闲暇时光 187 0 0

docker-compose failed to initialize database, got error unknown time zone As

code_balance 82 0 0

docker-compose start 报错 error response from daemon:failed to initialize lo

南柯Taylor 67 0 0

Android Studio 提示 Failed to initialize editor

吃面多放酱 119 0 0

精彩评论（0）

0 0 举报