常见 echarts 封装缺点
echarts 插件不应该直接全局引用
封装组件时考虑很全，导致导入配置传参过于繁琐
应用封装组件时，页面存在太多共用方法
组件封装思路
echarts 按需载入
提取页面图表（饼图，柱图可各自分开）公共特点封装一个基本组件
给每种封装类型的组件提供一个全局的方法，方便数据写入和个性化
实现
- echarts 初始化
这里是 echarts 封装的主要代码部分，把项目中需要用到部分先按需导入出来，避免打包过多，虽然 v3 支持 Tree-shaking，但还是写的规范一点吧！下面的 chart 使用的是 $shallowRef 为的是不去监听它的实时改变，不然会引发控制台的报错。
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);
};
- 导出每个组件的数据处理函数
这里其实做的是，获取不同的组件数据函数的方法，只不过这样获取的方法是按照指定文件夹格式进行一次性，避免手动导入和忘记导入，导致未获取到方法。
// 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[key].default);
}
}
console.log("dataMethod: ", modules);
export default {
// 全局挂载 处理数据函数
install: (app: any) => {
app.config.globalProperties["$dataFn"] = modules;
},
};
- 处理数据函数
这里的想法主要是把组件提取公共配置，配合传入的数据和个性化配置进行覆盖和添加，能更好地和每个不同配置的组件进行解耦。
// 参数（数据，个性化配置）
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,
};
- 使用效果
看起来是不是好看多呀！应该会有人问，万一这个组件配置很多写在后面还是很不好看，你可以写个 JSON 导入进去呀，或者放在 Map 里当变量写进去也行哇！
<script lang="ts" name="charts" setup></script>
<template>
<ChartView :options="$dataFn.bar([1, 2, 3, 4, 5, 6, 7])"></ChartView>
</template>
- vite.config.ts
这里讲解了该项目使用的一些小插件吧，方便开发滴！
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方面记录和总结！
[复制链接]
发表于 2022-3-14 11:02
|
发表于 2022-3-14 14:32
