系列文章目录
文章目录
- 系列文章目录
- 前言
- 一、为什么要封装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: {
},
