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

new money

于 2021-10-20 17:19:13 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript typescript

本文链接：https://blog.youkuaiyun.com/work33/article/details/120870457

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装的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>(