3d饼图 echart

要绘制3D饼图，可以使用ECharts中的visualMap组件和pie图表类型，具体步骤如下：

1. 在HTML文件中引入ECharts库和所需的主题文件。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/theme/macarons.js"></script>

2. 在JS文件中定义绘制3D饼图的数据和选项。

var data = [
    {value: 335, name: 'Chrome'},
    {value: 310, name: 'Firefox'},
    {value: 234, name: 'Safari'},
    {value: 135, name: 'IE'},
    {value: 1548, name: 'Other'}
];

var option = {
    title: {
        text: 'Browser Usage Statistics',
        textStyle: {
            fontSize: 24,
            fontWeight: 'bold',
            color: '#333'
        },
        left: 'center',
        top: 20
    },
    series: [{
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
            show: false
        },
        emphasis: {
            label: {
                show: true
            }
        },
        data: data
    }]
};

3. 使用ECharts的init方法初始化图表，并设置相应的选项。

var chart = echarts.init(document.getElementById('chart'), 'macarons');
chart.setOption(option);

4. 添加visualMap组件，用于控制3D饼图的视角和旋转。

chart.setOption({
    visualMap: {
        show: false,
        min: 0,
        max: 100,
        inRange: {
            color: ['#00a1e9', '#ffc107', '#f44336']
        }
    },
    series: [{
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
            show: false
        },
        emphasis: {
            label: {
                show: true
            }
        },
        data: data,
        itemStyle: {
            normal: {
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
            return Math.random() * 200;
        }
    }],
    globe: {
        baseTexture: 'https://www.echartsjs.com/examples/data-gl/asset/earth.jpg',
        heightTexture: 'https://www.echartsjs.com/examples/data-gl/asset/bathymetry_bw_composite_4k.jpg',
        displacementScale: 0.2,
        displacementQuality: 'high',
        environment: 'https://www.echartsjs.com/examples/data-gl/asset/starfield.jpg',
        shading: 'lambert',
        light: {
            ambient: {
                intensity: 0.4
            },
            main: {
                intensity: 0.4
            }
        },
        viewControl: {
            autoRotate: true
        }
    }
});

以上代码已经可以绘制出一个简单的3D饼图，你可以根据自己的需求进行修改和优化。