echarts 饼图 3D 立体的 如何实现

ECharts是一款强大的数据可视化库，在其官方文档中提供了3D饼图（donut3D）的示例。要创建一个3D立体的饼图，你需要按照以下步骤配置：

1. 引入必要的依赖：
在HTML文件中引入ECharts库和3D饼图插件：

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@ecomfe/echarts-gl@latest/dist/echarts-gl.min.js"></script>

2. 初始化图表并设置3D模式：

   var myChart = echarts.init(document.getElementById('main'), 'gl', {width: 600, height: 400});

3. 定义数据和配置选项：

   var option = {
       tooltip: {},
       legend: {},
       series: [{
           type: 'pie',
           name: '饼状图',
           radius: ['25%', '75%'], // 设置内切圆半径和外切圆半径
           roseType: 'angle', // 设置为角度玫瑰
           data: [
               { value: 335, name: '产品A' },
               { value: 310, name: '产品B' },
               { value: 234, name: '产品C' },
               { value: 135, name: '产品D' },
               { value: 1548, name: '其他' }
           ],
           itemStyle: {
               color: function (params) {
                   return '#'+['#d43f3a','#2b908f','#92c5de','#f4e0da','#f00'].join('#');
               }
           }
       }]
   };

4. 绘制图表：

   myChart.setOption(option);

以上就是基本的3D饼图配置，你可以根据实际需求调整颜色、标签和其他细节。如果想了解更详细的配置项，可以参考ECharts的官方文档：https://echarts.apache.org/examples/en/editor.html?c=pie-gl