写一个完整示例基于VUE3+TS+SETUP的echarts3D饼图

好的，以下是一个完整示例基于VUE3 TS SETUP的echarts3D饼图：

1. 首先安装echarts和vue-echarts

npm install echarts vue-echarts

2. 在VUE组件中引入echarts和vue-echarts，并在VUE组件中创建一个ECharts图表实例，并将该实例传递给vue-echarts组件来渲染。

<template>
  <div class="chart-container">
    <vue-echarts :options="chartOptions" :notMerge="true" :lazyUpdate="false" :theme="theme" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import VueECharts from 'vue-echarts';
import * as echarts from 'echarts';

export default defineComponent({
  components: {
    VueECharts,
  },
  setup() {
    const theme = ref<string>('light');

    const chartOptions = {
      backgroundColor: '#2c343c',
      series: [
        {
          type: 'pie',
          radius: '50%',
          selectedMode: 'single',
          label: {
            formatter: '{b}: {@{c}} ({d}%)',
            color: 'auto',
          },
          data: [
            { value: 1548, name: 'Chrome' },
            { value: 1234, name: 'IE' },
            { value: 1075, name: 'Firefox' },
            { value: 734, name: 'Safari' },
            { value: 665, name: 'Edge' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
    };

    return {
      theme,
      chartOptions,
    };
  },
});
</script>

<style scoped>
.chart-container {
  height: 300px;
}
</style>

这样，一个完整的示例基于VUE3 TS SETUP的echarts3D饼图就完成了。