vue3中使用echarts 饼图3d

在 Vue3 中使用 ECharts 创建饼图3D，你需要先安装 ECharts 的 Vue 组件库，例如 `vue-echarts` 或者 `@vue-echarts/core` 和 `@vue-echarts/components`。以下是基本步骤：

1. **安装依赖**：

   npm install vue-echarts @vue-echarts/core @vue-echarts/components

2. **引入组件**：
在你的 Vue 文件中，导入 `ECharts` 组件：

   import { ECharts } from '@vue-echarts/core';
   import Pie3D from '@vue-echarts/components/Pie3D.vue';

3. **在模板中使用**：
使用 `<ECharts>` 标签包裹你的饼图3D配置，并提供数据和选项：

   <template>
     <div id="chart">
       <ECharts :options="chartOptions" ref="pieChart"></ECharts>
     </div>
   </template>

   <script>
   export default {
     components: {
       Pie3D,
     },
     data() {
       return {
         chartOptions: {
           tooltip: {},
           legend: {},
           visualMap: {}, // 如果有颜色映射，可以添加这个部分
           series: [
             {
               type: 'pie',
               name: '销售额分布',
               radius: ['45%', '70%'],
               avoidLabelOverlap: false,
               label: {
                 normal: {
                   show: false,
                 },
                 emphasis: {
                   show: true,
                   textStyle: {
                     fontSize: '30',
                   },
                 },
               },
               itemStyle: {
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)',
                 },
               },
               data: [
                 { value: 335, name: '产品A' },
                 { value: 310, name: '产品B' },
                 { value: 234, name: '产品C' },
                 { value: 135, name: '其他' }
               ]
           }
         ],
       };
     },
     mounted() {
       this.$refs.pieChart.setOption(this.chartOptions);
     },
   };
   </script>

4. **设置事件监听**（如果需要）：
可以通过 `$refs` 监听图表的各种事件。