Vue2或Vue3 echarts公共组件

满脑子技术的前端工程师

已于 2023-02-08 15:47:23 修改

阅读量3.7k

点赞数

分类专栏： Echars图表📈 文章标签： echarts javascript vue.js

于 2023-02-08 15:42:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46022934/article/details/128907976

版权

本文档详细介绍了在Vue2或Vue3项目中封装Echarts公共组件的步骤，包括创建TypeScript组件、数据格式转换、公共方法编写以及组件使用方法，旨在简化Echarts图表的集成和配置。

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

系列文章目录

前言

提示：这里可以添加本文要记录的大概内容：

第一：涉及到数据部分数据结构的转化（前端👩‍🎓｜👨‍🎓也要会一些常规的数据转化｜不要想着都让后端👩‍🎓｜👨‍🎓做）
第二：主要是对Echarts 的一个公共封装，暴露给外部一个options 的Props传值
第三：可以自己在转化数据结构的时候，自行配置展示什么类型的图表

一、为什么要封装Echarts（背景）

2022年做的一个中台项目中，频繁的会使用Echarts的图标做一些数据的展示，所以就想到了可以对Echars图标组件做一层封装，这样就不用每次都重新引入 echarts 然后写一堆的 init 和resize调整方法，考虑到可以直接传递参数就好！！

如下图所示（会使用到很多的图表）：

在这里插入图片描述

二、封装Echarts公共组件的步骤

第一步：如何在Vue3中使用Echarts？点击👇🔗

Vue3中使用Echarts🔗

第二步：如何创建Echarts组件第一步的🔗

第一步：创建一个Echarts组件，预留一个props的传值入口
第二步：创建一个生成 options 的公共方法
第三步：在第二步里面对，请求来的数据进行一个【数据格式的转化】
第四步：批量使用Echarts图表

1.创建一个Echars组件（TypeScript）：

代码如下（可以直接CV到组件里面）

<template>
  <div
    class="echart-box"
    style="width: 100%; height: 100%; min-height: 200px"
  >
    <div class="box-echarts"     style="width: 100%; height: 100%;" ref="ech"></div>
  </div>
</template>

<script setup lang="tsx">
import {
    ref, computed, onMounted } from "vue";
import * as echarts from "echarts";
import {
    message } from "ant-design-vue";
interface Props {
   
  options: ECOption;
}
type ECOption = echarts.ComposeOption<
  | echarts.BarSeriesOption
  | echarts.LineSeriesOption
  | echarts.TitleComponentOption
  | echarts.TooltipComponentOption
  | echarts.GridComponentOption
  | echarts.DatasetComponentOption
>;
const props = withDefaults(defineProps<Props>(), {
   
  options: () => ({
   
    title: {
   
      text: "ECharts 入门示例",
    },
    tooltip: {
   },
    xAxis: {
   
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {
   },
    series: [
      {
   
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  }),
});

const ech = ref(