Highcharts 饼图（Pie Chart）详解
Highcharts 的饼图是最经典的占比展示图表，适合显示一个数据系列中各部分占整体的比例（总和为100%）。它支持普通饼图、半圆饼图（semi-circle donut）、环形图（donut）、3D 饼图等多种变体。
主要类型
- pie：基本饼图
- donut：环形饼图（中间镂空，常用于突出总值）
- 3D pie：立体饼图（需引入 highcharts-3d.js）
1. 基本饼图示例
以下是一个完整的标准饼图示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 饼图示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie', // 关键：设置为 'pie'
backgroundColor: '#f8f9fa',
plotShadow: true // 轻微阴影，提升立体感
},
title: {
text: '2024年浏览器市场份额',
style: { fontWeight: 'bold', fontSize: '22px' }
},
subtitle: {
text: '数据来源：StatCounter'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>', // 显示百分比
percentageDecimals: 1
},
accessibility: {
point: { valueSuffix: '%' }
},
plotOptions: {
pie: {
allowPointSelect: true, // 允许点击选中扇区
cursor: 'pointer', // 鼠标悬停显示手型
borderRadius: 5, // 扇区圆角
dataLabels: {
enabled: true, // 显示标签
format: '<b>{point.name}</b><br>{point.percentage:.1f}%',
distance: 30, // 标签距离扇区距离
style: { fontSize: '14px' }
},
showInLegend: true // 显示图例（可选）
}
},
series: [{
name: '市场份额',
colorByPoint: true, // 每个扇区自动不同颜色
data: [{
name: 'Chrome',
y: 64.8,
sliced: true, // 突出显示该扇区
selected: true
}, {
name: 'Safari',
y: 19.8
}, {
name: 'Edge',
y: 5.3
}, {
name: 'Firefox',
y: 4.2
}, {
name: '其他',
y: 5.9
}]
}]
});
</script>
</body>
</html>2. 环形饼图（Donut Chart）——最常用变体
只需在 plotOptions.pie 中添加 innerSize 即可实现环形效果：
plotOptions: {
pie: {
innerSize: '50%', // 关键：内圈大小（50%~70% 常见）
depth: 45, // 可选：增加厚度（类似3D效果）
dataLabels: {
enabled: true,
distance: -50, // 标签放在内圈
format: '<b>{point.name}</b>: {point.percentage:.1f}%',
style: { fontWeight: 'bold' }
}
}
},
// 可在中心显示总值
center: ['50%', '50%'],
// 额外添加中心文本（需自定义）
events: {
render: function() {
// 自定义中心文本示例（可选）
let renderer = this.renderer;
let total = this.series[0].data.reduce((sum, point) => sum + point.y, 0);
if (!this.totalText) {
this.totalText = renderer.text('总计<br><b>100%</b>', this.plotWidth / 2, this.plotHeight / 2)
.css({ fontSize: '20px', textAnchor: 'middle' })
.add();
}
}
}3. 半圆饼图（Semi-circle Donut）
chart: {
type: 'pie',
options3d: { enabled: false }
},
plotOptions: {
pie: {
innerSize: '50%',
startAngle: -90, // 从顶部开始
endAngle: 90, // 只画半圆
center: ['50%', '75%'] // 下移中心位置
}
}4. 3D 饼图
需额外引入模块：
<script src="https://code.highcharts.com/highcharts-3d.js"></script>chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45, // 垂直倾斜角
beta: 0,
depth: 50 // 厚度
}
},
plotOptions: {
pie: { depth: 50 }
}5. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | ‘pie’ |
plotOptions.pie.innerSize | ‘0%’（实心） / ‘40%-70%’（环形） |
plotOptions.pie.dataLabels | { enabled: true }（强烈推荐开启） |
series.colorByPoint | true（自动分配颜色） |
point.sliced/selected | 突出某个扇区 |
plotOptions.pie.startAngle/endAngle | 控制饼图旋转角度和范围（半圆常用） |
饼图数据必须是单系列，且各点 y 值总和最好为 100（Highcharts 会自动计算百分比）。
如果你需要：
- 多层嵌套环形图（variable pie）
- 点击钻取子饼图（drilldown）
- 自定义颜色主题
- 在 Vue/React 中的封装方式
告诉我具体需求，我可以提供完整代码示例！
