Highcharts 区域图（Area Chart）详解
Highcharts 中的区域图用于展示数据随时间（或类别）的累积变化趋势，数据点之间的区域会被填充颜色，非常适合表现总量、占比或趋势强度。常见变体有：
- area：基本区域图（系列不叠加）
- areaspline：平滑曲线区域图（推荐，视觉更柔和）
- arearange：区域范围图（显示高低值区间，如温度范围）
- stacked area：堆叠区域图（多个系列垂直叠加，显示总量贡献）
1. 基本区域图示例（areaspline）
以下是一个完整的平滑区域图示例（多系列、非堆叠）：
<!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: 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：
<script src="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'→ 百分比堆叠区域图
如果你需要：
- 堆叠 + 百分比显示
- 带负值的区域图
- 与折线图混合
- 动态数据更新
告诉我具体场景，我可以提供完整代码示例！
