vue3 echarts 3D饼图 解决数据为0的时候显示问题

在Vue3中使用Echarts绘制3D饼图时，遇到数据为0的问题，可能会导致该部分区域在图表上不可见。Echarts默认不会渲染值为0的数据点。解决这个问题的一种常见做法是调整数据展示策略或者手动处理数据。

1. **数据处理**：在数据加载到前端之前，可以先对数据进行处理，如果某个值为0，可以将其设置为一个极小的非零数值（比如`0.0001`），这将使得3D饼图能够显示出来。例如：

const data = [
  { name: 'A', value: 5 },
  { name: 'B', value: 0 }, // 原始数据有0值
  { name: 'C', value: 10 },
  ... // 其他数据
];

// 数据预处理
data.forEach(item => {
  if (item.value === 0) item.value = 0.0001;
});

2. **配置项设置**：在创建ECharts实例时，可以设置`roseType`属性为'area'，这样即使某些部分值为0，也能通过填充的方式显示出来：

const option = {
  series: [{
    type: 'pie',
    roseType: 'area', // 更改为填充模式
    data: data,
    label: {
      normal: {
        show: false
      }
    }
  }]
};

3. **自定义渲染**：如果你需要更精细的控制，还可以自定义渲染函数，针对值为0的情况特殊处理：

echarts.registerComponent('customPie', {
  extends: 'pie',
  render: function () {
    const pie = this.component.getMain();
    // 对于值为0的数据，使用其他颜色表示
    pie.data().forEach((item, index) => {
      if (item.value === 0) {
        item.color = '#ccc'; // 设置为灰色等显眼的颜色
      }
    });
    return pie;
  }
});

// 使用自定义组件
<custom-pie :option="option" />