vue3+echarts实现3d环形图，只有两条数据，却均分显示了

在 Vue3 中结合 ECharts 实现 3D 环形图时，如果数据量只有两条并且希望平均分布，你需要明确地设置图表的数据、角度以及视图模式。ECharts 的环形图默认会均匀分配每个部分的角度，所以即使数据量少，也可以看到均等的部分。

以下是一个基本的步骤：

1. 安装依赖：首先确保你在项目中已经安装了 Vue 和 ECharts。你可以通过 `npm install echarts vue-echarts` 来安装 Vue-ECharts 插件。

2. 创建组件：在 Vue 组件中引入 ECharts，并创建一个 3D 圆环图实例。

<template>
  <div id="chart-container" style="height: 400px;"></div>
</template>

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

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      chartData: [
        { name: '数据1', value: 50 },
        { name: '数据2', value: 50 }, // 即使只有两组数据，也会平均分配
      ],
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const myChart = this.$echarts.init(document.getElementById('chart-container'));
      const option = {
        tooltip: {},
        visualMap: {
          type: 'piecewise',
          pieces: [{ min: 0, max: 100, color: 'rgba(0,0,255,1)' }],
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            roseType: 'radius',
            data: this.chartData,
            label: {
              normal: {
                formatter: '{b} : {c}%',
              },
            },
            animationDurationUpdate: 1000,
            animationEasing: 'linear',
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

在这个例子中，我们设置了两个数据点，名称分别为 "数据1" 和 "数据2"，各自值为 50，`roseType: 'radius'` 用于创建三维效果，`animationDurationUpdate` 可以让动画更平滑。因为数据量少，每个部分会自动占据相等的视角。