在vue3中使用组合式api设置一个echarts中的饼图

在Vue 3中，使用组合式 API (Composition API) 设置 ECharts 饼图的步骤大致如下：

1. 首先，确保在你的项目中已经安装了 ECharts 库。如果尚未安装，可以通过npm或yarn来安装它。

2. 在你的Vue组件中，使用`<script setup>`标签来编写组合式 API 代码。

3. 导入`echarts`实例，并创建一个响应式对象用于存储图表的配置项。

4. 在`onMounted`生命周期钩子中初始化 ECharts 实例，并在`onBeforeUnmount`生命周期钩子中进行销毁，以避免内存泄漏。

5. 使用ECharts提供的方法设置图表数据和配置。

下面是具体的代码示例：

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

// 声明一个响应式的饼图配置项
const pieChartOptions = reactive({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '55%',
        data: [{
            value: 1048,
            name: '衬衫'
        }, {
            value: 735,
            name: '羊毛衫'
        }, {
            value: 580,
            name: '雪纺衫'
        }, {
            value: 484,
            name: '裤子'
        }, {
            value: 300,
            name: '高跟鞋'
        }, {
            value: 220,
            name: '袜子'
        }]
    }]
});

// 容器ID
const pieChartContainer = 'pieChartContainer';

// 获取容器DOM元素
const pieChartDom = ref(null);
const pieChart = ref(null);

// 渲染图表
const renderPieChart = () => {
    pieChart.value = echarts.init(pieChartDom.value);
    pieChart.value.setOption(pieChartOptions);
};

onMounted(() => {
    renderPieChart();
});

onBeforeUnmount(() => {
    if (pieChart.value) {
        pieChart.value.dispose();
    }
});

watch(pieChartOptions, () => {
    pieChart.value.setOption(pieChartOptions);
}, { deep: true });
</script>

<template>
    <div ref="pieChartDom" id="pieChartContainer"></div>
</template>

在上面的代码中，我们创建了一个名为`pieChartOptions`的响应式对象来存储饼图的配置项。在组件挂载后，我们通过`echarts.init`初始化图表，并使用`setOption`方法应用配置项。在组件卸载前，我们调用`dispose`方法来销毁图表实例，以避免内存泄漏。

请注意，上述代码仅作示例，实际应用中可能需要根据具体的项目结构和需求进行调整。