用vue3.0+ts封装echart组件_帮我封装vue3 echart组件实现复用性,这个组件能够实现以下功能:初始化echart实例-CSDN博客

本文链接：https://blog.csdn.net/DaDouDouOne/article/details/122919698

本文介绍了如何在Vue3项目中使用TypeScript封装ECharts组件，详细阐述了从安装配置ECharts，到封装组件的各个步骤，包括组件参数定义、图表初始化和更新、事件监听等，旨在提高ECharts组件的复用性。

摘要由CSDN通过智能技术生成

文章目录

前言
一、安装和配置 echart
二、封装echart组件
三.使用封装好的echart组件

前言

这只是想总结echart的封装。可以更好的复用echart，不用每次写echart的时候都要初始化一次图表。写一个可以复用的组件，就很爽。

一、安装和配置 echart

1.第一步先把echart的依赖包，下载下来

npm install echarts --save

二、封装echart组件

新建一个v3echart.vue文件

1.引入用到vue3资源和echart

代码如下（示例）：

import {
   
  reactive,
  ref,
  watch,
  onMounted,
  watchEffect,
  nextTick,
  markRaw,
} from "vue";
import * as charts from "echarts";

2.构建一个dom对象，用来存放图表

由于每个图表的宽高都不一样，这里就封装成参数传入进来了。这里传入的id要传入唯一值。不然，重名的话，会导致图表重复
代码如下（示例）：

<template>
  <div
    :style="`width:${width}px;height:${height}px;margin-top:${top}px`"
    class="container"
    :id="container"
    :ref="container"
  ></div>
</template>

3.defineProps定义传入的参数

代码如下（示例）：

const props = defineProps({
   
 //图表的options
  options: {
   
    type: Object,
    require: true,
  },
  width: {
   
    type: String,
    default: "860",
  },
  height: {
   
    type: String,
    default: "400",
  },
  top: {
   
    type: String,
    default: "0",
  },
  //首次加载
  isFirst: {
   
    type: Boolean,
    default: false,
  },
  //组件唯一值
  container: {
   
    type: String,
    default: "container",
  },
  //是否开启点击事件
  isClick: {
   
    type: Boolean,
    default: false,
  },
  //点击事件的回调函数
  clickOb:{
   
    type:Function,
    default:null
  }
});

3.初始化图表和更新option

代码如下（示例）：

//定义一个空的响应式Aecharts对象
const Aecharts: any = reactive({
    value: "" });
//对option进行监听，有更新时，重新执行changeEchart方法
watch(
  () => props.options,
  (newval) => {
   
    changeEcharts(props.options);
  },
  {
   
    deep: true,
  }
);
const changeEcharts = (options: any) => {
   
  Aecharts.value.setOption(options);
  if (props.isFirst) {
   
    console.log("aaaaaaa");
    let index = 0