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

记录一个使用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();
  };
 
}复制