什么是 Highcharts 圆环图？
在数据可视化的世界里，图形的选择往往决定了信息传达的效率。如果你正在寻找一种既能展示比例关系、又比普通饼图更具视觉吸引力的方式，那么 Highcharts 圆环图就是你值得尝试的工具。
Highcharts 圆环图本质上是饼图的一种变形。它和饼图最大的区别在于中心留白——这个空心区域可以用来展示关键数值、状态标签，甚至作为动态更新的仪表盘。想象一下：一个汽车仪表盘上的燃油百分比，中间显示“75%”，周围是代表剩余油量的彩色环带，这就是典型的圆环图应用场景。
与传统饼图相比，Highcharts 圆环图的优势在于：
- 中心区域可自定义内容（如数字、图标、文字）
- 更适合展示“占比”与“总量”双重信息
- 旋转动画和交互效果更自然
- 支持多层环形结构，实现复杂数据分组
更重要的是，Highcharts 圆环图在移动端和响应式布局中表现优异，适配性极强。无论你是做报表系统、后台监控，还是前端项目中的数据展示模块，它都能轻松胜任。
如何引入 Highcharts 库
在使用 Highcharts 圆环图之前，首先要确保你已经正确引入了 Highcharts 库。这一步看似简单，却是后续所有功能的基础。
打开你的 HTML 文件，添加以下代码到 <head> 区域：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
注释：
highcharts.js是核心库，负责图表渲染；exporting.js提供导出为 PNG、PDF 等格式的功能，建议保留。如果你不需要导出功能，可以省略第二行，以减少加载体积。
接下来，在页面中准备一个用于渲染图表的容器：
<div id="container" style="width: 600px; height: 400px; margin: 0 auto;"></div>
注释：
id="container"是图表绑定的元素，必须唯一。width和height决定了图表大小，建议设置为固定值或使用 CSS 类控制响应式布局。
此时，你已经完成了环境搭建。接下来，我们正式进入 Highcharts 圆环图的创建流程。
创建基础圆环图
现在我们来写第一个完整的 Highcharts 圆环图代码。它将展示一个简单的用户行为分布数据。
// 初始化图表配置
Highcharts.chart('container', {
chart: {
type: 'pie', // 使用 pie 类型，但通过 innerSize 控制为圆环
plotBorderWidth: 0 // 去掉外边框，让图形更干净
},
title: {
text: '用户行为分布' // 图表标题
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' // 鼠标悬停显示百分比
},
plotOptions: {
pie: {
allowPointSelect: true, // 允许点击选中
cursor: 'pointer', // 鼠标变成手型
dataLabels: {
enabled: true, // 显示数据标签
format: '<b>{point.name}</b>: {point.percentage:.1f}%', // 标签内容格式
distance: -50, // 标签向内偏移，避免重叠
style: {
color: 'white',
fontSize: '12px',
textOutline: 'none'
}
},
// 关键设置：将饼图变为圆环图
innerSize: '60%' // 内部空心区域大小，60% 表示圆环宽度
}
},
series: [{
name: '行为类型',
colorByPoint: true, // 每个扇区颜色不同
data: [
{ name: '浏览', y: 45 },
{ name: '收藏', y: 25 },
{ name: '下单', y: 20 },
{ name: '分享', y: 10 }
]
}]
});
注释：
type: 'pie'是基础类型，但通过innerSize控制形状。innerSize: '60%'是生成圆环图的关键参数，值越小，中间空心越大。dataLabels用于显示每个扇区的名称和占比，distance: -50让标签向内移动，避免与外部标签冲突。tooltip提供交互提示，鼠标悬停时显示具体百分比。colorByPoint: true自动为每个数据点分配不同颜色，提升视觉区分度。
运行这段代码，你会看到一个圆环图，四个扇区分别代表不同用户行为，中心区域留白，非常适合添加总数量或状态说明。
自定义圆环图样式
Highcharts 圆环图的强大之处不仅在于功能，更在于它的高度可定制性。你可以通过调整颜色、动画、字体等细节，让图表更贴合项目风格。
修改颜色与渐变
如果你希望某个扇区使用特殊颜色，可以在 data 数组中直接指定 color 字段：
data: [
{ name: '浏览', y: 45, color: '#FF6B6B' },
{ name: '收藏', y: 25, color: '#4ECDC4' },
{ name: '下单', y: 20, color: '#45B7D1' },
{ name: '分享', y: 10, color: '#96CEB4' }
]
注释：直接在数据项中设置
color，可以精准控制每个扇区的配色。建议使用十六进制颜色码，避免颜色名兼容性问题。
添加动态动画
Highcharts 默认开启动画效果，但你也可以手动控制：
chart: {
type: 'pie',
animation: {
duration: 1500, // 动画持续时间（毫秒）
easing: 'easeOutBounce' // 动画缓动函数
},
plotBorderWidth: 0
}
注释：
animation.duration控制动画时长，easing定义动画曲线。easeOutBounce会让扇区“弹跳”进入，适合强调数据加载过程。
设置中心文字
这是圆环图最具价值的功能之一：在中心区域显示重要信息。
plotOptions: {
pie: {
innerSize: '60%',
center: ['50%', '50%'], // 中心点位置（百分比）
dataLabels: {
enabled: true,
format: '<div style="text-align:center; font-size:20px; color:#333;">{point.y}</div>',
style: {
fontWeight: 'bold'
}
}
}
}
注释：
center设置中心坐标，'50%'表示水平垂直居中。dataLabels的format可以包含 HTML 标签，因此能插入<div>实现复杂排版。- 这里显示的是原始数值（
point.y），你也可以改为point.total或自定义文本。
例如，你可以在中心显示“总用户：1000”，让数据意义更直观。
高级技巧：多层圆环图与响应式设计
当数据结构更复杂时，Highcharts 圆环图支持多层嵌套——也就是“同心圆”效果。这在展示层级关系时非常有用。
创建多层圆环图
series: [{
name: '第一层',
innerSize: '40%', // 内层圆环大小
data: [
{ name: 'A', y: 30 },
{ name: 'B', y: 20 },
{ name: 'C', y: 50 }
]
}, {
name: '第二层',
innerSize: '70%',
data: [
{ name: 'X', y: 40 },
{ name: 'Y', y: 60 }
]
}]
注释：
- 每个
series代表一层圆环。innerSize值越大，圆环越窄；越小，越宽。- 通过合理设置层级，可以展示“大类 → 子类”结构，如“地区 → 城市”、“部门 → 员工数量”。
实现响应式布局
为了让图表在手机和平板上依然美观，建议添加响应式配置：
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
plotOptions: {
pie: {
innerSize: '50%'
}
},
title: {
text: '移动设备显示'
}
}
}]
}
注释：
responsive是 Highcharts 的响应式机制。- 当屏幕宽度小于 500px 时，自动应用新的配置。
- 可以动态调整
innerSize、title、legend位置等，提升移动端体验。
实际应用案例：销售业绩看板
假设你正在开发一个销售系统，需要在后台展示各区域的业绩占比。Highcharts 圆环图是理想选择。
Highcharts.chart('container', {
chart: {
type: 'pie',
animation: {
duration: 1000,
easing: 'easeOutQuart'
}
},
title: {
text: '2024 年 Q2 区域销售业绩'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
innerSize: '70%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f}%',
distance: -30,
style: {
fontSize: '12px',
color: 'white'
}
},
// 中心显示总销售额
center: ['50%', '50%'],
dataLabels: {
enabled: true,
format: '<div style="font-size:24px; font-weight:bold;">¥{point.total}</div>',
style: {
color: '#333',
textOutline: 'none'
}
}
}
},
series: [{
name: '区域',
data: [
{ name: '华东', y: 180000, color: '#FF6B6B' },
{ name: '华南', y: 220000, color: '#4ECDC4' },
{ name: '华北', y: 150000, color: '#45B7D1' },
{ name: '西南', y: 100000, color: '#96CEB4' },
{ name: '西北', y: 80000, color: '#FFD166' }
]
}],
credits: {
enabled: false // 关闭 Highcharts 水印
}
});
注释：
point.total是所有数据项的总和，可用于显示“总销售额”；credits: { enabled: false }隐藏默认水印，提升专业感；- 每个区域配色明确，便于快速识别。
这个案例充分展示了 Highcharts 圆环图在真实项目中的价值：不仅美观，而且信息密度高，交互友好。
总结与建议
Highcharts 圆环图是一种兼具美感与实用性的数据可视化工具。它在展示占比关系、强调关键指标方面表现突出，特别适合用于报表、后台管理、仪表盘等场景。
通过本文的学习，你已经掌握了：
- 如何引入并初始化 Highcharts
- 如何创建基础圆环图
- 如何自定义颜色、动画和中心内容
- 如何实现多层环形与响应式布局
- 如何应用于真实业务场景
记住，优秀的数据可视化不是“炫技”，而是让数据“说话”。Highcharts 圆环图正是这样一个桥梁——它用直观的图形，把枯燥的数字变成可感知的信息。
如果你还在为如何展示“占比”发愁，不妨试试 Highcharts 圆环图。它或许就是你项目中那个“点睛之笔”。