vue3使用echars图表报错：“Initialize failed:invalid dom“

阳羊扬洋

已于 2022-12-06 17:26:43 修改

阅读量7.7k

点赞数 8

分类专栏：前端文章标签： echarts 前端 javascript

于 2022-12-06 17:26:02 首次发布

本文链接：https://blog.csdn.net/Danyang_L/article/details/128205958

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

记录一个使用echars图表过程中的小问题

这是我第一次使用的步骤

1.引入echars依赖:终端输入如下命令

cnpm i install echarts --save

2.使用的vue页面中导入echars

import * as echarts from “echarts”;

3.创建Dom展示图表

<div >
   <div id="echarRef" style="height: 300px;width: 400px;border: 1px solid #ebebeb;border-radius: 2px;"></div>
</div>

4.获取Dom，初始化图表并使用setOption()方法设置图表数据

 onMounted(async () => {
    //根据id获取dom元素
    let myChart = echarts.init(document.getElementById("echarRef"));
    myChart.setOption({
      title: { text: "用户" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
    window.onresize = function () {//自适应大小
      myChart.resize();
    };

  })

运行之后，发现报错如下：

原因是因为：Dom没有完成加载时，echarts.init() 就已经开始执行了，获取不到Dom，无法进行操作

解决方法如下：

第一种：给echarts.init()设置定时器，延迟此操作，代码调整如下

onMounted(async () => {
    setTimeout(() => {aa()}, 1000)
})

const aa = () => {
  let myChart = echarts.init(document.getElementById("echarRef"));
  myChart.setOption({
    title: { text: "CPU使用率" },
    tooltip: {},
    xAxis: {
      data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
    },
    yAxis: {},
    series: [
      {
        name: "用户量",
        type: "line",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
  window.onresize = function () {//自适应大小
    myChart.resize();
  };

}