vue3+ts中使用封装后的echarts。适合小白（报错的也可以看Initialize failed: invalid dom.）

原创

于 2021-10-20 17:19:13 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #typescript

本文介绍如何在Vue3与TypeScript环境下封装Echarts，并解决可能出现的'Initialize failed: invalid dom.'错误。通过创建一个Echarts组件并在App.vue中应用，详细阐述了组件的使用方法。

封装的echarts

userEach.ts
import {
   
    ref, nextTick } from 'vue'
import * as echarts from 'echarts'
//这个方法，接收一个option和dom的id
//目的：用的时候只需要传option和dom的id就能绘制出一个图表，很适合我们小白刚开始学函数的用法
export default function useEchar (option:object, name:string) {
   
   
  const myChart = ref<HTMLElement>() // 也可以用const myChart = ref<any>();
  console.log(myChart)
  const myCharts = ref<any>(