ECharts 饼图（Pie Chart）教程
ECharts 饼图（Pie Chart）教程
ECharts 的饼图（series.type = ‘pie’）主要用于展示数据在总体中的占比比例，支持实心饼图、圆环图（南丁格尔图/玫瑰图）、多层嵌套等变体。数据通过data数组中的{ value, name }对象提供，ECharts 会自动计算百分比。
1. 基础饼图示例
以下是一个完整的简单饼图，直接复制到 HTML 文件运行即可。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><title>ECharts 基础饼图</title><!-- 引入最新版 ECharts --><scriptsrc="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script></head><body><divid="main"style="width:800px;height:600px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));varoption={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
如果你需要圆环图、南丁格尔玫瑰图、嵌套饼图或其他自定义（如动态数据），告诉我具体需求，我可以给出完整代码！