vue3使用echars图表报错：“Initialize failed:invalid dom“-Toy模板网

这篇具有很好参考价值的文章主要介绍了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();
    };

  })

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

vue3使用echars图表报错：“Initialize failed:invalid dom“,前端,echarts,前端,javascript 原因是因为：Dom没有完成加载时，echarts.init() 就已经开始执行了，获取不到Dom，无法进行操作

解决方法如下：

第一种：给echarts.init()设置定时器，延迟此操作，代码调整如下文章来源地址https://www.toymoban.com/news/detail-559280.html

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

}

到了这里，关于vue3使用echars图表报错：“Initialize failed:invalid dom“的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！