首页 前端知识 vue3使用echars图表报错:“Initialize failed:invalid dom“

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

2024-04-13 23:04:52 前端知识 前端哥 633 780 我要收藏

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

}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4904.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!