ECharts 饼图（Pie Chart）教程
ECharts 的饼图（series.type = ‘pie’）主要用于展示数据在总体中的占比比例，支持实心饼图、圆环图（南丁格尔图/玫瑰图）、多层嵌套等变体。数据通过 data 数组中的 { value, name } 对象提供，ECharts 会自动计算百分比。
1. 基础饼图示例
以下是一个完整的简单饼图，直接复制到 HTML 文件运行即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>ECharts 基础饼图</title>
<!-- 引入最新版 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '基础饼图示例',
subtext: '数据占比展示',
left: 'center'
},
tooltip: {
trigger: 'item', // 鼠标悬停显示提示
formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示系列名、数据名、值、百分比
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '访问来源',
type: 'pie',
radius: '60%', // 饼图半径，占容器60%
center: ['50%', '50%'], // 中心位置
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
emphasis: { // 高亮效果（hover时）
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>2. 常见变体
- 圆环图（Doughnut Chart）：设置
radius: ['40%', '70%']（内半径、外半径），中间可显示文字。 - 玫瑰图（Rose Chart）：添加
roseType: 'radius'（半径模式）或'area'（面积模式），适合展示数据密度。 - 标签配置：
label: { show: true, position: 'outside', formatter: '{b}: {d}%' }（外部标签显示名称+百分比）labelLine: { show: true }（显示引导线）
3. 关键配置项（series-pie）
| 配置项 | 说明 |
|---|---|
| radius | 半径：字符串（如 ‘60%’）、数字，或数组 [‘内%’, ‘外%’] 用于圆环图 |
| center | 中心坐标：[‘50%’, ‘50%’] |
| roseType | ‘radius’ 或 ‘area’：玫瑰图模式 |
| label | 标签：show/position/formatter 等 |
| labelLine | 引导线：show/length/smooth |
| itemStyle | 扇形样式：颜色、边框、阴影 |
| emphasis | hover 高亮样式 |
| data | 数据数组：[{value: number, name: string}] |
更多示例和高级配置，推荐官方：
- 基础饼图：https://echarts.apache.org/handbook/zh/how-to/chart-types/pie/basic-pie/
- 示例 Gallery：https://echarts.apache.org/examples/zh/#chart-type-pie
如果你需要圆环图、南丁格尔玫瑰图、嵌套饼图或其他自定义（如动态数据），告诉我具体需求，我可以给出完整代码！
