可算不用管 echarts 烦人的配置了
# 常见 echarts 封装缺点echarts 插件不应该直接全局引用
封装组件时考虑很全，导致导入配置传参过于繁琐
应用封装组件时，页面存在太多共用方法
# 组件封装思路
echarts 按需载入
提取页面图表（饼图，柱图可各自分开）公共特点封装一个基本组件
给每种封装类型的组件提供一个全局的方法，方便数据写入和个性化
# 实现
1. echarts 初始化
> 这里是 echarts 封装的主要代码部分，把项目中需要用到部分先按需导入出来，避免打包过多，虽然 v3 支持 Tree-shaking，但还是写的规范一点吧！下面的 chart 使用的是 $shallowRef 为的是不去监听它的实时改变，不然会引发控制台的报错。
```typescript
import * as echarts from "echarts/core"; // echarts 主要库
import { BarChart, PieChart } from "echarts/charts"; // 引入柱图，饼图组件
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
ToolboxComponent,
} from "echarts/components"; // 引入工具组件
import { CanvasRenderer } from "echarts/renderers"; // 使用 canvas 渲染引擎
echarts.use([
CanvasRenderer,
BarChart,
PieChart,
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
ToolboxComponent, // 挂载
]);
// vue3 ref 实例
let chart = $shallowRef<echarts.ECharts>();
const ref = $ref(null);
// 初始化
const init = () => {
// 参数（dom，主题，渲染引擎）
chart = echarts.init(ref, "", {
// 这里是props只是props传参，默认 canvas 可见源码
renderer: props.type,
});
chart.setOption(props.options);
};
```
2. 导出每个组件的数据处理函数
> 这里其实做的是，获取不同的组件数据函数的方法，只不过这样获取的方法是按照指定文件夹格式进行一次性，避免手动导入和忘记导入，导致未获取到方法。
```typescript
// vite 勿用 required方法 导入文件夹
const files = import.meta.globEager("./options/**/*.js");
let modules: any = {};
for (const key in files) {
if (Object.prototype.hasOwnProperty.call(files, key)) {
modules = Object.assign({}, modules, files.default);
}
}
console.log("dataMethod: ", modules);
export default {
// 全局挂载 处理数据函数
install: (app: any) => {
app.config.globalProperties["$dataFn"] = modules;
},
};
```
3. 处理数据函数
> 这里的想法主要是把组件提取公共配置，配合传入的数据和个性化配置进行覆盖和添加，能更好地和每个不同配置的组件进行解耦。
```typescript
// 参数（数据，个性化配置）
const bar = (data, config = {}) => {
const defaultConfig = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data,
type: "bar",
},
],
};
return Object.assign({}, defaultConfig, config);
};
export default {
// 导出
bar,
};
```
4. 使用效果
> 看起来是不是好看多呀！应该会有人问，万一这个组件配置很多写在后面还是很不好看，你可以写个 JSON 导入进去呀，或者放在 Map 里当变量写进去也行哇！
```typescript
<script lang="ts" name="charts" setup></script>
<template>
<ChartView :options="$dataFn.bar()"></ChartView>
</template>
```
5. vite.config.ts
> 这里讲解了该项目使用的一些小插件吧，方便开发滴！
```typescript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import viteImage from "vite-plugin-vue-images"; // 图片模块化
import autoImport from "unplugin-auto-import/vite"; // 自动导入 v3 方法
import setupExtend from "vite-plugin-vue-setup-extend"; // setup 支持 name 组件名
import vueJsx from "@vitejs/plugin-vue-jsx"; // 支持jsx
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx", "vue"],
},
plugins: [
vue({
reactivityTransform: true,
}),
viteImage({
// 指定图片目录
dirs: ["src/assets"],
extensions: ["jpg", "jpeg", "png", "svg"],
}),
autoImport({
// 插件引入后会自动生成该文件
dts: "src/auto-imports.d.ts",
imports: ["vue"],
}),
setupExtend(),
vueJsx(),
],
});
```
> 源码地址：(https://github.com/guochengpeng/web)
> 新人第一次发帖，和破解无关，只是一些Web方面记录和总结！ marieswang 发表于 2022-3-14 14:27
66666，这么弄普通的图标会方便很多，有下钻以后就比较麻烦了，传参和跳转比较费劲
你说的我也可以理解，但也单独把相应的事件单独拆出来封装一下，在传进去；现在封装比较适合数据视图的场景。 学习学习 66666，很方便 ange7 发表于 2022-3-14 11:48
66666，很方便
是的哈，特别是组件页面多的情况！ 不错，不粗，不粗{:301_997:} 等公司项目上vue3了再来看{:301_998:} 这个不错，谢谢分享 学到了,真的好用 sylf0120 发表于 2022-3-14 13:15
等公司项目上vue3了再来看
好的好的，欢迎欢迎！{:301_975:} xiaohan1 发表于 2022-3-14 13:30
这个不错，谢谢分享
感谢支持！{:301_993:}
页:
[1]
2