vue3封装echarts的饼状图

### 封装 Echarts 饼状图组件 为了在 Vue 3 中更好地利用 Echarts 创建饼状图，可以按照如下方式来封装一个易于使用的组件。这不仅简化了代码结构，还提高了项目的可维护性和扩展性。 #### 安装依赖库 首先确保安装了必要的依赖项 `echarts` 和 `vue`： ```bash npm install echarts vue@next ``` #### 创建 v-charts 文件夹并初始化配置文件 1. **创建 useCharts.ts** 此模块负责处理通用逻辑，比如初始化图表实例、设置选项以及响应窗口大小变化等功能[^3]。 ```typescript // src/v-charts/useCharts.ts import * as echarts from 'echarts/core'; import { ref, onMounted, watchEffect } from 'vue'; export function useEchart(elRef: any) { let chartInstance: echarts.ECharts | null; const initChart = () => { if (!chartInstance && elRef.value) { chartInstance = echarts.init(elRef.value); } }; const setOptions = (option: echarts.EChartsOption) => { if (chartInstance) { chartInstance.setOption(option); window.addEventListener('resize', resizeHandler); // 监听父级容器尺寸改变事件[^4] } }; const resizeHandler = () => { setTimeout(() => { if (chartInstance) { chartInstance.resize(); } }, 100); }; onMounted(initChart); watchEffect(resizeHandler); return { setOptions, }; } ``` 2. **构建 PieChart.vue 组件** 该组件实现了具体的饼状图渲染功能，并接收外部传入的数据作为属性传递给内部的 option 设置函数[^1]。 ```html <!-- src/components/PieChart.vue --> <template> <div :ref="elRef"></div> </template> <script lang="ts"> import { defineComponent, h, PropType, VNode, ref } from 'vue'; import { useEchart } from '../v-charts/useCharts'; interface SeriesDataItem { value: number; name: string; } const defaultOption = (): echarts.EChartsOption => ({ tooltip: { trigger: 'item', }, series: [ { type: 'pie', data: [], }, ], }); export default defineComponent({ props: { pieData: Array as PropType<SeriesDataItem[]>, }, setup(props) { const elRef = ref(null); const { setOptions } = useEchart(elRef); setOptions({ ...defaultOption(), series: [{ data: props.pieData || [] }] }); return () => h('div', { ref: elRef }); }, }); </script> ``` 通过上述步骤可以在 Vue 3 应用程序中轻松集成和管理 Echarts 饼状图组件，使得开发过程更加高效便捷。