echarts 饼图3d立体效果

ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的数据可视化图表。它提供了丰富的图表类型，包括饼图，并且支持3D立体效果。

要在ECharts中创建饼图并添加3D立体效果，你可以按照以下步骤进行操作：

1. 引入ECharts库：在HTML文件中引入ECharts库的JavaScript文件。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>

2. 创建一个容器：在HTML文件中创建一个用于显示图表的容器。

<div id="chartContainer" style="width: 600px; height: 400px;"></div>

3. 初始化图表：在JavaScript代码中初始化一个ECharts实例，并指定容器的ID。

var chart = echarts.init(document.getElementById('chartContainer'));

4. 配置饼图数据：设置饼图的数据和样式。

var option = {
    series: [{
        type: 'pie',
        radius: '50%',
        data: [
            {value: 335, name: '数据1'},
            {value: 310, name: '数据2'},
            {value: 234, name: '数据3'},
            {value: 135, name: '数据4'},
            {value: 1548, name: '数据5'}
        ],
        label: {
            show: true,
            formatter: '{b} : {c} ({d}%)'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
            }
        }
    }]
};

在上面的代码中，`data`数组中的每个对象表示一个饼图的数据项，`name`表示数据项的名称，`value`表示数据项的值。`label`用于设置饼图上的标签显示样式，`emphasis`用于设置鼠标悬停时的样式。

5. 设置3D效果：为了给饼图添加3D立体效果，需要在`series`中添加`globe`属性，并设置其值为`true`。

option.series.globe = true;

6. 渲染图表：将配置应用到图表实例中，并渲染出来。

chart.setOption(option);

以上就是在ECharts中创建饼图并添加3D立体效果的基本步骤。你可以根据自己的需求进一步调整配置和样式。