Highcharts 区域图（Area Chart）详解
Highcharts 中的区域图用于展示数据随时间（或类别）的累积变化趋势，数据点之间的区域会被填充颜色，非常适合表现总量、占比或趋势强度。常见变体有：
- area：基本区域图（系列不叠加）
- areaspline：平滑曲线区域图（推荐，视觉更柔和）
- arearange：区域范围图（显示高低值区间，如温度范围）
- stacked area：堆叠区域图（多个系列垂直叠加，显示总量贡献）
1. 基本区域图示例（areaspline）
以下是一个完整的平滑区域图示例（多系列、非堆叠）：
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Highcharts 区域图示例</title><scriptsrc="https://code.highcharts.com/highcharts.js"></script></head><body><divid="container"style="width:900px;height:500px;margin:50px auto;"></div><script>Highcharts.chart('container',{chart:{type:'areaspline',// 关键：平滑区域图backgroundColor:'#f8f9fa'},title:{text:'2020-2024 年三大浏览器市场份额变化',style:{fontWeight:'bold'}},subtitle:{text:'数据来源：StatCounter'},xAxis:{categories:['2020','2021','2022','2023','2024'],tickmarkPlacement:'on'},yAxis:{title:{text:'市场份额 (%)'},labels:{format:'{value}%'},max:100},tooltip:{shared:true,// 共享提示框，显示所有系列值valueSuffix:'%',valueDecimals:1},plotOptions:{areaspline:{fillOpacity:0.6,// 区域填充透明度（0-1，越小越透明）lineWidth:2,marker:{enabled:true,radius:5,states:{hover:{radius:8}}}}},series:[{name:'Chrome',data:[65.8,66.5,65.9,65.2,64.8],color:'#FF6B6B'},{name:'Safari',data:[18.5,18.9,19.2,19.5,19.8],color:'#4ECDC4'},{name:'Edge',data:[5.2,4.8,4.9,5.1,5.3],color:'#45B7D1'}]});</script></body></html>2. 堆叠区域图（Stacked Area）——显示总量
堆叠区域图非常适合展示“部分之和 = 总量”的场景。
只需添加plotOptions中的stacking配置：
plotOptions:{areaspline:{stacking:'normal',// 'normal' 普通堆叠，'percent' 百分比堆叠fillOpacity:0.7,lineWidth:2}},series:[{name:'产品A',data:[10,15,20,25,30]},{name:'产品B',data:[20,18,15,20,25]},{name:'产品C',data:[30,25,30,25,20]}]stacking: 'normal'→ 绝对值堆叠（Y 轴显示总量）stacking: 'percent'→ 百分比堆叠（Y 轴始终 0-100%）
3. 区域范围图（Arearange）——显示波动范围
适合展示温度、股价波动等带上下限的数据。
需引入highcharts-more.js：
<scriptsrc="https://code.highcharts.com/highcharts-more.js"></script>配置示例：
chart:{type:'arearange'},series:[{name:'温度范围',data:[// [low, high] 格式，x 可为时间戳或索引[-5.2,2.1],[0.5,8.3],[5.1,15.2],// 对应月份// ...],color:'#7cb5ec',fillOpacity:0.3}]4. 常用配置总结
| 配置项 | 推荐值/说明 |
|---|---|
chart.type | ‘area’ / ‘areaspline’（推荐） / ‘arearange’ |
plotOptions.area.stacking | ‘normal’ 或 ‘percent’（堆叠时使用） |
plotOptions.area.fillOpacity | 0.4 ~ 0.7（透明度，防止颜色太重） |
tooltip.shared | true（多系列时强烈推荐） |
series.lineWidth | 2~4（边线粗细） |
5. 快速切换类型
type: 'area'→ 直角区域图type: 'areaspline'→ 平滑区域图（最常用）- 加
stacking: 'normal'→ 堆叠区域图 - 加
stacking: 'percent'→ 百分比堆叠区域图
如果你需要：
- 堆叠 + 百分比显示
- 带负值的区域图
- 与折线图混合
- 动态数据更新
告诉我具体场景，我可以提供完整代码示例！
