「vue3-element-admin」基于 TypeScript 的 ECharts 按需引入方案实战

「vue3-element-admin」基于 TypeScript 的 ECharts 按需引入方案实战 - Vue3 项目打包体积优化 57%

🚀 作者主页：有来技术
🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template
🌺 仓库主页： GitCode︱ Gitee ︱ Github
💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！

问题背景

在开源项目 vue3-element-admin 后台模板中，控制台的访问趋势图表组件（VisitTrend）目前采用全量引入 ECharts 的方式，这导致打包后的文件体积较大，显示为 1 MB 以上。为了优化性能，建议采用按需引入 ECharts 的方式，从而减少打包体积，提升页面加载速度。

打包分析

使用 rollup-plugin-visualizer 进行打包分析：

pnpm add -D rollup-plugin-visualizer

Vite 配置（vite.config.ts）

import { type ConfigEnv, defineConfig } from "vite";
import { visualizer } from "rollup-plugin-visualizer";
export default defineConfig(({ mode }: ConfigEnv) => ({plugins: [visualizer({open: true, // 自动打开分析页面filename: "stats.html",gzipSize: true, // 显示gzip压缩后体积brotliSize: true })]
}));

分析结果如图：

按需引入 ECharts

安装依赖

pnpm add echarts

组件封装

封装通用组件（src/components/Echarts/index.vue），参考 ECharts 官方文档-按需引入 ECharts 图表和组件

<!--* 基于 ECharts 的 Vue3 图表组件* 版权所有 © 2021-present 有来开源组织** 开源协议：https://opensource.org/licenses/MIT* 项目地址：https://gitee.com/youlaiorg/vue3-element-admin** 在使用时，请保留此注释，感谢您对开源的支持！--><template><div ref="chartRef" :style="{ width, height }"></div>
</template><script setup lang="ts">
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状、折线和饼图常用图表
import { BarChart, LineChart, PieChart } from "echarts/charts";
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，
import { GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";import { useResizeObserver } from "@vueuse/core";// 按需注册组件
echarts.use([CanvasRenderer,BarChart,LineChart,PieChart,GridComponent,TooltipComponent,LegendComponent,
]);const props = defineProps<{options: echarts.EChartsCoreOption;width?: string;height?: string;
}>();const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;// 初始化图表
const initChart = () => {if (chartRef.value) {chartInstance = echarts.init(chartRef.value);if (props.options) {chartInstance.setOption(props.options);}}
};// 监听尺寸变化，自动调整
useResizeObserver(chartRef, () => {chartInstance?.resize();
});// 监听 options 变化，更新图表
watch(() => props.options,(newOptions) => {if (chartInstance && newOptions) {chartInstance.setOption(newOptions);}},{ deep: true }
);onMounted(() => {nextTick(() => initChart());
});onBeforeUnmount(() => {chartInstance?.dispose();
});
</script>

组件调用

<template><div class="dashboard-container"><ECharts :options="chartOptions" height="400px" /></div>
</template><script setup lang="ts">
import ECharts from '@/components/Echarts/index.vue'defineOptions({name: "Dashboard",inheritAttrs: false,
});const data = {dates: ["2025-02-07","2025-02-08","2025-02-09","2025-02-10","2025-02-11","2025-02-12","2025-02-13",],pvList: [5057, 4309, 1654, 4523, 3944, 3908, 5247],ipList: [446, 420, 141, 442, 430, 392, 466],
};const chartOptions = ref();
/***  初始化图表*/
const initChart = () => {chartOptions.value = {tooltip: {trigger: "axis",},legend: {data: ["浏览量(PV)", "访客数(UV)"],bottom: 0,},xAxis: {type: "category",data: data.dates,},yAxis: {type: "value",splitLine: {show: true,lineStyle: {type: "dashed",},},},series: [{name: "浏览量(PV)",type: "line",data: data.pvList,smooth: true,itemStyle: {color: "#4080FF",},lineStyle: {color: "#4080FF",},},{name: "访客数(UV)",type: "line",data: data.ipList,smooth: true,itemStyle: {color: "#67C23A",},lineStyle: {color: "#67C23A",},},],};
};onMounted(() => {initChart();
});
</script>