js 实现echarts3D饼图

要使用JavaScript实现Echarts 3D饼图，你需要先引入Echarts库，并按照以下步骤进行操作：

1. 首先，在HTML文件中引入Echarts库的CDN链接或者下载并引入本地的Echarts库文件。

2. 创建一个具有指定宽度和高度的DOM容器，用于显示饼图。例如，在HTML文件中添加一个div元素，并为其设置一个id，如下所示：

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

3. 在JavaScript文件中，使用Echarts提供的API来配置和绘制饼图。以下是一个简单的示例代码：

// 获取DOM容器
var chartContainer = document.getElementById('chartContainer');

// 基于Echarts初始化图表
var myChart = echarts.init(chartContainer);

// 配置饼图的数据和样式
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '数据1'},
                {value: 310, name: '数据2'},
                {value: 234, name: '数据3'},
                {value: 135, name: '数据4'},
                {value: 1548, name: '数据5'}
            ]
        }
    ]
};

// 使用配置项显示饼图
myChart.setOption(option);

以上代码中，我们通过Echarts的API来配置饼图的数据和样式，然后使用`setOption`方法将配置项应用到图表中。