vue3+ts项目封装echarts饼图

下载echarts 

npm i echarts

饼图对应type为pie

成果图: (数据为动态展示所以要封装组件)

 封装组件 为 EPIPieChart.vue

封装组件 通用代码

详细代码如下

使用组件

 

useResizeChart.ts文件

 用于自适应 echarts 图表大小

import echarts from "@/assets/ts/echarts";
export default function useResizeChart(container: HTMLElement, chart: echarts.ECharts) {

    // 监听容器大小变化
    const resizeObserver = new ResizeObserver(entries => {
        // 重新设置大小
        chart.resize({
            animation: {
                duration: 500
            }
        });
    });

    resizeObserver.observe(container);

    // onBeforeUnmount(() => {
    // 	// 销毁前解除监听
    // 	resizeObserver.unobserve(container);
    // })

}