vue3 echarts实现3d饼状

在Vue3中使用ECharts实现3D饼状图，首先你需要安装`vue-echarts`库，它是一个将ECharts封装为Vue组件的轻量级工具。以下是基本步骤：

1. **安装依赖**:
在你的项目里运行 `npm install vue-echarts echarts @types/echarts` 或者 `yarn add vue-echarts echarts @types/echarts`

2. **创建组件**:
创建一个新的Vue组件文件，例如`ThreeDPie.vue`，然后导入ECharts并设置图表配置:

<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ECharts } from 'vue-echarts';

const options = {
  tooltip: {},
  visualMap: {
    pieceswise: [
      {min: 0, max: 50, color: ['#31a354']}, // 分段颜色
      {max: 100, color: ['#e76f51']}
    ],
    show: true,
    orient: 'horizontal',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: '55%',
      data: [
        {value: 335, name: 'iOS'},
        {value: 310, name: 'Android'},
        {value: 234, name: 'Others'}
      ],
      label: {
        normal: {
          position: 'outside'
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationDurationUpdate: 800,
      threeDim: {
        rotation: {
          x: -45
        }
      }
    }
  ]
};

const chartRef = ref(new ECharts({
  init: (canvas) => {
    return new ECharts(canvas);
  }
}));

onMounted(() => {
  chartRef.value.setOption(options);
});
</script>

3. **在父组件中使用**:
现在你可以在其他需要的地方引入这个组件，并传入数据和配置。