Vue2或Vue3 echarts公共组件

系列文章目录

文章目录

• 系列文章目录
• 前言
• 一、为什么要封装Echarts（背景）
• • 如下图所示（会使用到很多的图表）：
• 二、封装Echarts公共组件的步骤
• • 第一步：如何在Vue3中使用Echarts？ 点击??
  • 第二步：如何创建Echarts组件 第一步的?
  • • 1.创建一个Echars组件（TypeScript）：
    • • 代码如下（可以直接CV到组件里面）
    • 2.需要转化的数据格式如下
    • • 这里的数据主要是mock（自行定夺使用）
    • 3.写一个对步骤二数据转化的公共方法
    • • 代码如下
      • 代码说明，如下图所示
    • 4.写一个公共的方法（创建图标的Options）：
    • • 代码说明：
      • 代码如下
    • 5.在组件中使用如下（这一步Echarts准备工作基本已经完成）：
    • • 使用代码如下
• 三、效果图如下所示
• • 效果如下图
• 总结

前言

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

第一：涉及到数据部分数据结构的转化（前端?‍?｜?‍?也要会一些常规的数据转化｜不要想着都让后端?‍?｜?‍?做）
第二：主要是对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: {
   },复制