如何使用 ECharts 创建一个立体三维效果的饼状图？

ECharts 提供了 `echarts-gl` 扩展包来创建三维图表，包括三维饼状图。要创建一个立体三维效果的饼状图，首先需要安装 `echarts-gl`，然后按照以下步骤操作：

1. 引入依赖：

import * as echarts from 'echarts';
import 'echarts-gl';

2. 初始化图表并设置选项，其中包含 `gl` 配置：

const myChart = echarts.init(document.getElementById('main'));

// 使用 gl 特性
myChart.setOption({
  // ...常规配置...
  visualMap: {
    type: 'piecewise',
    pieces: [
      {min: 0, max: 50, color: '#4f7dca'}, // 分段颜色映射
      {max: 100, color: '#d9eae6'} // 如果值超过100，显示另一种颜色
    ],
    show: false, // 初始时不显示视觉映射
    dimension: 2, // 指定要在 gl 中可视化的维度
  },
  series: [{
    type: 'pie', // 系列类型为饼状图
    name: '数据',
    roseType: 'area', // 使用玫瑰型饼图，可以提供三维感
    data: [
      {value: 33.3, name: '部分A'},
      {value: 33.3, name: '部分B'},
      {value: 33.4, name: '部分C'}
    ],
    itemStyle: {
      normal: {
        shadowBlur: 10, // 添加阴影增加立体感
        color: new echarts.gl.Color().setHSL(0.6, 1, 0.6) // 设置颜色渐变
      }
    },
    encode: {
      tooltip: { // 控制提示框的位置
        seriesIndex: -1,
        dataIndex: -1
      },
      label: { // 标签位置
        seriesIndex: -1,
        dataIndex: -1,
        position: 'top'
      }
    }
  }],
});

3. 显示视觉映射：

// 当鼠标悬停在图表上时，动态显示视觉映射
myChart.on('mouseover', function (params) {
  if (params.value[params.seriesIndex] > 100) {
    this.option.visualMap.show = true;
  } else {
    this.option.visualMap.show = false;
  }
});

// 鼠标移出恢复默认状态
myChart.on('mouseout', function () {
  this.option.visualMap.show = false;
});