Highcharts 教程
Highcharts 教程
Highcharts 是一款基于 JavaScript 的图表库,由挪威公司 Highsoft 开发,支持曲线图、柱状图、饼图、散点图、3D 图等几十种图表类型,是 Web 数据可视化的主流选择。
核心特性
- 丰富图表类型:曲线、柱状、饼图、散点、气泡、树状、仪表盘等
- 交互性强:鼠标悬停提示、缩放、拖拽、动态更新
- 兼容性好:支持所有主流浏览器与移动端
- 无依赖:只需 jQuery(或完全独立),轻量易用
- 文档完善:官方 API 与示例齐全
引入方式
<!-- CDN 引入 --> <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script>
第一个图表
<div id="container"></div>
<script>
Highcharts.chart("container", {
title: { text: "月度销售额" },
xAxis: { categories: ["1月", "2月", "3月", "4月"] },
yAxis: { title: { text: "销售额(万元)" } },
series: [{
name: "2025年",
data: [120, 150, 130, 180]
}]
});
</script>
学习路线
- 环境配置与配置语法
- 各图表类型(曲线/区域/条形/柱形/饼图/散点/气泡)
- 动态图与组合图
- 3D 图、测量图、树状图
Highcharts 环境配置
Highcharts 环境配置
1. 下载与引入
# CDN 引入(推荐) <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script> # 完整 CDN(含更多模块) <script src="https://code.highcharts.com/highcharts.js"></script> # 本地下载 # https://www.highcharts.com/download # 引入 highcharts.js 即可
2. 按需引入模块
<!-- 额外模块按需引入 --> <script src="https://code.highcharts.com/modules/exporting.js"></script> <!-- 导出 --> <script src="https://code.highcharts.com/modules/3d.js"></script> <!-- 3D --> <script src="https://code.highcharts.com/modules/treemap.js"></script> <!-- 树状图 --> <script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- 气泡/极区等 --> <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> <!-- 仪表盘 -->
3. 基本页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Highcharts 图表</title>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px;"></div>
<script>
Highcharts.chart("chart", {
title: { text: "示例图表" },
series: [{ name: "数据", data: [1, 3, 2, 5] }]
});
</script>
</body>
</html>
4. Vue/React 集成
# Vue 使用
npm install highcharts
import Highcharts from "highcharts";
// 在组件中
mounted() {
Highcharts.chart("chart-el", {
title: { text: "Vue 图表" },
series: [{ data: [5, 10, 8] }]
});
}
# 或使用官方封装 highcharts-vue / highcharts-react-official
5. 容器要求
- 容器必须有宽度和高度(否则图表不显示)
- 推荐设置百分比或固定像素
- 多个图表用不同 id
- 重新渲染前先销毁:chart.destroy()
Highcharts 配置语法
Highcharts 配置语法
1. 配置对象结构
Highcharts.chart("container", {
// 图表全局
chart: {
type: "line", // 图表类型
backgroundColor: "#fff",
height: 400
},
// 标题
title: {
text: "销售趋势",
style: { color: "#333", fontSize: "18px" }
},
subtitle: { text: "副标题" },
// X 轴
xAxis: {
categories: ["周一", "周二", "周三"],
title: { text: "日期" }
},
// Y 轴
yAxis: {
title: { text: "数值" },
min: 0
},
// 数据提示
tooltip: {
shared: true,
valueSuffix: " 万元"
},
// 图例
legend: {
layout: "horizontal",
align: "center"
},
// 数据系列
series: [{
name: "2025年",
data: [100, 120, 150]
}]
});
2. 图表类型 chart.type
line 曲线图 area 区域图 bar 条形图 column 柱形图 pie 饼图 scatter 散点图 bubble 气泡图 treemap 树状图 solidgauge 仪表盘 column3d 3D 柱形 line3d 3D 曲线
3. 数据格式
// 简单数组
data: [1, 3, 2]
// 键值对数组
data: [["苹果", 5], ["香蕉", 8]]
// 对象数组(x, y)
data: [{x: 1, y: 10}, {x: 2, y: 20}]
// 命名点
data: [{name: "北京", y: 100}, {name: "上海", y: 150}]
4. 多系列数据
series: [
{ name: "2024年", data: [100, 110, 120] },
{ name: "2025年", data: [130, 140, 150] },
{ name: "2026年", data: [160, 170, 180] }
]
5. 主题与样式
// 全局颜色
Highcharts.setOptions({
colors: ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9"]
});
// 导出按钮
exporting: {
enabled: true,
buttons: { contextButton: { menuItems: ["downloadPNG", "downloadPDF"] } }
}
Highcharts 曲线图
Highcharts 曲线图
曲线图(line chart)用于展示数据随时间或类别的变化趋势,是最高频的图表类型。
1. 基本曲线图
<div id="line-chart"></div>
<script>
Highcharts.chart("line-chart", {
title: { text: "月均气温变化" },
xAxis: {
categories: ["1月", "2月", "3月", "4月", "5月", "6月"]
},
yAxis: {
title: { text: "气温(°C)" }
},
series: [{
name: "北京",
data: [-3, 0, 8, 15, 22, 27]
}, {
name: "广州",
data: [13, 15, 19, 24, 28, 31]
}]
});
</script>
2. 平滑曲线
Highcharts.chart("container", {
chart: { type: "spline" }, // 平滑曲线
title: { text: "平滑曲线图" },
series: [{
data: [10, 15, 12, 20, 18, 25]
}]
});
3. 数据点样式
series: [{
name: "趋势",
data: [10, 20, 15, 30, 25],
lineWidth: 3, // 线宽
color: "#e74c3c", // 线条颜色
marker: {
symbol: "circle", // 点形状: circle/square/diamond
radius: 5,
fillColor: "#fff",
lineWidth: 2,
lineColor: "#e74c3c"
},
dashStyle: "solid" // 线型: solid/dash/dot
}]
4. 面积填充效果
series: [{
name: "访问量",
data: [100, 120, 95, 150, 130],
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, "rgba(124,181,236,0.6)"],
[1, "rgba(124,181,236,0.1)"]
]
}
}]
5. 双 Y 轴曲线
Highcharts.chart("container", {
title: { text: "销售与利润" },
xAxis: { categories: ["Q1", "Q2", "Q3", "Q4"] },
yAxis: [
{ title: { text: "销售额" } },
{ title: { text: "利润率" }, opposite: true }
],
series: [
{ name: "销售额", data: [100, 120, 110, 150] },
{ name: "利润率", data: [20, 25, 18, 30],
yAxis: 1, dashStyle: "dash" }
]
});
Highcharts 区域图
Highcharts 区域图
区域图(area chart)在曲线图基础上填充面积,适合展示数据量的累计变化与对比。
1. 基本区域图
<div id="area-chart"></div>
<script>
Highcharts.chart("area-chart", {
chart: { type: "area" },
title: { text: "年度用户增长" },
xAxis: {
categories: ["1月", "2月", "3月", "4月", "5月", "6月"]
},
yAxis: {
title: { text: "用户数(万)" }
},
series: [{
name: "新增用户",
data: [5, 8, 12, 15, 22, 30]
}]
});
</script>
2. 堆叠区域图
Highcharts.chart("container", {
chart: { type: "area" },
title: { text: "各渠道访问量" },
plotOptions: {
area: {
stacking: "normal" // 堆叠: normal 普通 / percent 百分比
}
},
xAxis: { categories: ["周一", "周二", "周三", "周四", "周五"] },
series: [
{ name: "直接访问", data: [30, 40, 35, 45, 50] },
{ name: "搜索引擎", data: [50, 45, 60, 55, 70] },
{ name: "社交媒体", data: [20, 25, 15, 30, 25] }
]
});
3. 百分比堆叠
plotOptions: {
area: { stacking: "percent" }
}
// Y 轴显示百分比占比,展示各渠道份额
4. 透明度与渐变
series: [{
name: "收入",
data: [100, 130, 120, 160],
fillOpacity: 0.4, // 填充透明度
lineColor: "#2ecc71",
lineWidth: 2
}]
5. 区域图应用场景
- 流量/访问量趋势
- 用户增长曲线
- 库存变化
- 渠道占比对比(堆叠)
Highcharts 条形图
Highcharts 条形图
条形图(bar chart)是横向柱状图,适合展示分类名称较长的数据对比。
1. 基本条形图
<div id="bar-chart"></div>
<script>
Highcharts.chart("bar-chart", {
chart: { type: "bar" },
title: { text: "各城市 GDP(亿元)" },
xAxis: {
categories: ["北京", "上海", "广州", "深圳", "杭州"]
},
yAxis: {
title: { text: "GDP(亿元)" }
},
series: [{
name: "GDP",
data: [43760, 47218, 30355, 34606, 21860]
}]
});
</script>
2. 横向条形图排序
// 数据降序展示
series: [{
name: "得分",
data: [
{ name: "产品A", y: 92 },
{ name: "产品B", y: 85 },
{ name: "产品C", y: 78 },
{ name: "产品D", y: 65 }
]
}]
// 或者用 JavaScript 排序后传入
const data = [{name:"A",y:65},{name:"B",y:92},{name:"C",y:78}];
data.sort((a, b) => b.y - a.y);
3. 分组条形图
Highcharts.chart("container", {
chart: { type: "bar" },
title: { text: "男女销量对比" },
xAxis: { categories: ["手机", "电脑", "平板", "耳机"] },
series: [
{ name: "男", data: [120, 90, 40, 80] },
{ name: "女", data: [110, 70, 60, 95] }
]
});
4. 堆叠条形图
plotOptions: {
bar: { stacking: "normal" }
},
series: [
{ name: "线上", data: [50, 40, 30] },
{ name: "线下", data: [30, 35, 40] }
]
5. 条形图样式
series: [{
name: "数据",
data: [10, 20, 30],
colorByPoint: true, // 每根不同颜色
borderRadius: 4, // 圆角
dataLabels: {
enabled: true, // 显示数值
format: "{y} 亿元"
}
}]
Highcharts 柱形图
Highcharts 柱形图
柱形图(column chart)是竖向柱状图,适合分类对比与时间序列展示。
1. 基本柱形图
<div id="column-chart"></div>
<script>
Highcharts.chart("column-chart", {
chart: { type: "column" },
title: { text: "季度销售额" },
xAxis: { categories: ["Q1", "Q2", "Q3", "Q4"] },
yAxis: { title: { text: "销售额(万元)" } },
series: [{
name: "2025年",
data: [120, 150, 110, 180]
}, {
name: "2026年",
data: [140, 170, 130, 200]
}]
});
</script>
2. 分组 vs 堆叠
// 分组(默认):并排显示
plotOptions: { column: {} }
// 堆叠
plotOptions: { column: { stacking: "normal" } }
// 百分比堆叠
plotOptions: { column: { stacking: "percent" } }
3. 单色/多彩柱形
series: [{
name: "数据",
data: [5, 8, 12, 7, 10],
colorByPoint: true, // 每个柱子不同颜色
colors: ["#e74c3c", "#f39c12", "#2ecc71", "#3498db", "#9b59b6"]
}]
4. 圆角与间距
plotOptions: {
column: {
borderRadius: 6, // 圆角
pointPadding: 0.1, // 柱子间间距
groupPadding: 0.2 // 组间距
}
}
5. 数据标签与工具提示
plotOptions: {
column: {
dataLabels: {
enabled: true,
format: "{y} 万元",
style: { fontWeight: "normal" }
}
}
},
tooltip: {
headerFormat: "<b>{point.x}</b><br/>",
pointFormat: "{series.name}: {point.y} 万元"
}
Highcharts 饼图
Highcharts 饼图
饼图(pie chart)展示各部分占比,适合份额分布分析。
1. 基本饼图
<div id="pie-chart"></div>
<script>
Highcharts.chart("pie-chart", {
chart: { type: "pie" },
title: { text: "市场份额分布" },
series: [{
name: "份额",
data: [
{ name: "Chrome", y: 65 },
{ name: "Edge", y: 12 },
{ name: "Safari", y: 10 },
{ name: "Firefox", y: 8 },
{ name: "其他", y: 5 }
]
}]
});
</script>
2. 显示百分比
plotOptions: {
pie: {
allowPointSelect: true, // 点击选中
cursor: "pointer",
dataLabels: {
enabled: true,
format: "<b>{point.name}</b>: {point.percentage:.1f}%"
}
}
}
3. 环形图(donut)
plotOptions: {
pie: {
innerSize: "60%" // 内部挖空,变成环形
}
}
4. 半圆饼图
// 起始角度控制半圆
series: [{
type: "pie",
startAngle: -90, // 起始角度
endAngle: 90, // 结束角度 → 半圆
center: ["50%", "75%"], // 中心位置
size: "150%",
data: [...]
}]
5. 分离饼块
data: [
{ name: "A", y: 30, sliced: true }, // 分离该块
{ name: "B", y: 50 },
{ name: "C", y: 20 }
]
6. 样式美化
plotOptions: {
pie: {
borderColor: "#fff",
borderWidth: 2,
shadow: true
}
},
legend: { enabled: true, layout: "vertical", align: "right" }
Highcharts 散点图
Highcharts 散点图
散点图(scatter chart)用于展示两个变量之间的关系与分布,适合相关性分析。
1. 基本散点图
<div id="scatter-chart"></div>
<script>
Highcharts.chart("scatter-chart", {
chart: { type: "scatter" },
title: { text: "身高与体重关系" },
xAxis: { title: { text: "身高(cm)" } },
yAxis: { title: { text: "体重(kg)" } },
series: [{
name: "样本",
data: [
[165, 55], [170, 60], [175, 68], [180, 72],
[160, 50], [178, 75], [172, 65], [185, 80]
]
}]
});
</script>
2. 多组散点对比
series: [
{ name: "男生", color: "#3498db",
data: [[170,65],[175,70],[180,75]] },
{ name: "女生", color: "#e74c3c",
data: [[160,50],[165,55],[158,48]] }
]
3. 标记样式
plotOptions: {
scatter: {
marker: {
radius: 5,
symbol: "circle", // circle/square/diamond/triangle
lineWidth: 1,
lineColor: "#333"
},
jitter: { x: 0.5 } // 抖动,避免重叠
}
}
4. 回归线添加
// 用折线叠加趋势线
series: [
{ type: "scatter", name: "数据点", data: points },
{ type: "line", name: "趋势线", data: trendLine, dashStyle: "dash" }
]
5. 大数据量散点
// 大量数据用 boost 模块加速
<script src="https://code.highcharts.com/modules/boost.js"></script>
plotOptions: {
scatter: { boostThreshold: 1000 } // 超过 1000 点启用 boost
}
Highcharts 气泡图
Highcharts 气泡图
气泡图(bubble chart)用气泡大小表示第三个维度,适合多维数据对比。
1. 基本气泡图
<div id="bubble-chart"></div>
<script>
Highcharts.chart("bubble-chart", {
chart: { type: "bubble" },
title: { text: "产品分析" },
xAxis: { title: { text: "销量" } },
yAxis: { title: { text: "利润" } },
series: [{
name: "产品",
data: [
[100, 50, 30], // [x, y, 气泡大小]
[150, 80, 45],
[80, 120, 60],
[200, 90, 55]
]
}]
});
</script>
2. 带名称的气泡
series: [{
name: "产品",
data: [
{ x: 100, y: 50, z: 30, name: "产品A" },
{ x: 150, y: 80, z: 45, name: "产品B" },
{ x: 80, y: 120, z: 60, name: "产品C" }
]
}]
3. 多系列气泡
series: [
{ name: "手机", data: [[50,60,20],[70,80,30],[90,100,25]] },
{ name: "电脑", data: [[30,40,15],[60,50,20],[80,70,35]] }
]
4. 气泡大小控制
plotOptions: {
bubble: {
minSize: 5, // 最小气泡
maxSize: 60, // 最大气泡
colorByPoint: true
}
}
5. 气泡图应用
- 产品组合分析(销量×利润×规模)
- 城市人口与经济数据
- 市场机会矩阵
- 风险收益分布
Highcharts 动态图
Highcharts 动态图
动态图实时更新数据,适合监控、行情、传感器数据展示。
1. 实时曲线(定时更新)
<div id="live-chart"></div>
<script>
const chart = Highcharts.chart("live-chart", {
chart: { type: "line" },
title: { text: "实时监控数据" },
xAxis: { type: "datetime", tickPixelInterval: 150 },
yAxis: { title: { text: "数值" } },
legend: { enabled: false },
series: [{ name: "实时数据", data: [] }]
});
// 每秒添加一个数据点
setInterval(() => {
const point = [
Date.now(), // x: 时间戳
Math.random() * 100 // y: 随机值
];
const series = chart.series[0];
series.addPoint(point, true, true); // 添加并滚动
}, 1000);
</script>
2. 动态柱状图
const chart = Highcharts.chart("container", {
chart: { type: "column" },
title: { text: "实时排名" },
xAxis: { categories: ["A", "B", "C", "D", "E"] },
series: [{ name: "得分", data: [0, 0, 0, 0, 0] }]
});
setInterval(() => {
const newData = [1,2,3,4,5].map(() =>
Math.floor(Math.random() * 100));
chart.series[0].setData(newData); // 整体替换数据
}, 2000);
3. 数据点平滑过渡
chart.series[0].addPoint([Date.now(), value], true, true, {
duration: 300 // 动画时长(毫秒)
});
4. 动态更新控制
// 停止/恢复更新
let timer = setInterval(update, 1000);
function stopLive() {
clearInterval(timer);
chart.series[0].update({ color: "#999" }); // 状态标识
}
function startLive() {
timer = setInterval(update, 1000);
}
// 内存优化:限制数据点数量
chart.series[0].addPoint(point, true, true, { maxPoints: 100 });
5. WebSocket 实时数据
const ws = new WebSocket("wss://api.example.com/live");
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
chart.series[0].addPoint([data.time, data.value], true, true);
};
// 断线重连
ws.onclose = () => setTimeout(() => connect(), 3000);
Highcharts 组合图
Highcharts 组合图
组合图在同一图表中混合多种图表类型,如柱状+折线,常见于"销量对比+趋势"场景。
1. 柱状+折线组合
<div id="combo-chart"></div>
<script>
Highcharts.chart("combo-chart", {
title: { text: "销售额与增长率" },
xAxis: { categories: ["Q1", "Q2", "Q3", "Q4"] },
yAxis: [
{ title: { text: "销售额(万元)" } },
{ title: { text: "增长率(%)" }, opposite: true }
],
series: [
{ name: "销售额", type: "column",
data: [120, 150, 130, 180], yAxis: 0 },
{ name: "增长率", type: "line",
data: [20, 25, -13, 38], yAxis: 1,
dashStyle: "dash", color: "#e74c3c" }
]
});
</script>
2. 柱状+面积组合
series: [
{ name: "预算", type: "column", data: [50, 60, 55, 70] },
{ name: "实际", type: "area", data: [48, 65, 50, 75],
fillOpacity: 0.3 }
]
3. 饼图+柱状组合
// 主图柱状,副图饼图
series: [
{ name: "总量", type: "column",
data: [{y: 100, drilldown: "detail"}] },
{ name: "明细", type: "pie",
center: ["80%", "20%"], size: 100,
data: [
{ name: "A", y: 40 },
{ name: "B", y: 60 }
] }
]
4. 组合图应用场景
- 销量与增长率(柱+线)
- 计划与实际对比(柱+面积)
- 温度与湿度(双线)
- 访问量与转化率(柱+线,双轴)
5. 组合图最佳实践
// 每个系列指定 type 与 yAxis
series: [
{ type: "column", yAxis: 0, ... },
{ type: "line", yAxis: 1, ... }
]
// 图例清晰区分
legend: { enabled: true }
Highcharts 3D图
Highcharts 3D图
3D 图表增加立体效果,视觉冲击力强,适合演示与报告场景。
1. 引入 3D 模块
<!-- 必须先引入 highcharts,再引入 3d 模块 --> <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script> <script src="https://code.highcharts.com/modules/3d.js"></script>
2. 3D 柱状图
<div id="chart3d"></div>
<script>
Highcharts.chart("chart3d", {
chart: {
type: "column",
options3d: {
enabled: true, // 开启 3D
alpha: 15, // 垂直旋转角度
beta: 15, // 水平旋转角度
depth: 60 // 深度
}
},
title: { text: "3D 柱状图" },
xAxis: { categories: ["A", "B", "C", "D"] },
yAxis: { title: { text: "数值" } },
series: [{
name: "数据",
data: [30, 45, 25, 60]
}]
});
</script>
3. 3D 饼图
Highcharts.chart("container", {
chart: {
type: "pie",
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: { text: "3D 饼图" },
plotOptions: {
pie: {
depth: 35, // 厚度
allowPointSelect: true
}
},
series: [{
name: "占比",
data: [
{ name: "A", y: 40 },
{ name: "B", y: 30 },
{ name: "C", y: 20 },
{ name: "D", y: 10 }
]
}]
});
4. 3D 散点图
chart: {
type: "scatter",
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 200
}
},
series: [{
name: "数据",
data: [[10,20,30],[15,25,10],[20,15,40],[30,10,25]]
}]
5. 3D 图表控制
// 添加旋转控制按钮
chart: {
options3d: { enabled: true, alpha: 15, beta: 15 },
events: {
load: function() {
this.setSize(); // 初始化
}
}
}
// 动态旋转
chart.options.chart.options3d.beta += 5;
chart.redraw();
Highcharts 测量图
Highcharts 测量图
测量图(仪表盘 gauge)用半圆仪表展示单一指标的当前值,适合 KPI 监控。
1. 基本仪表盘
<div id="gauge-chart"></div>
<script>
Highcharts.chart("gauge-chart", {
chart: {
type: "solidgauge", // 实心仪表
marginTop: 50
},
title: { text: "服务器负载" },
pane: {
startAngle: -90,
endAngle: 90,
background: [{
outerRadius: "100%",
innerRadius: "60%",
backgroundColor: "#eee"
}]
},
yAxis: {
min: 0,
max: 100,
stops: [
[0.3, "#2ecc71"], // 0-30% 绿色
[0.6, "#f1c40f"], // 30-60% 黄色
[1, "#e74c3c"] // 60-100% 红色
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
labels: { distance: 15 }
},
series: [{
name: "负载",
data: [65],
dataLabels: {
format: "<div style='font-size:30px'>{y}%</div>"
}
}]
});
</script>
2. 引入测量模块
// solidgauge 需要模块
<script src="https://code.highcharts.com/highcharts-more.js"></script>
// 或使用 classic gauge(指针式)
chart: { type: "gauge" }
3. 指针式仪表
Highcharts.chart("container", {
chart: { type: "gauge" },
title: { text: "速度表" },
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: {
min: 0,
max: 200,
plotBands: [
{ from: 0, to: 80, color: "#2ecc71" },
{ from: 80, to: 140, color: "#f1c40f" },
{ from: 140, to: 200, color: "#e74c3c" }
]
},
series: [{
name: "速度",
data: [120],
dial: { radius: "80%" }
}]
});
4. 动态更新仪表
const chart = Highcharts.chart(...);
setInterval(() => {
const value = Math.floor(Math.random() * 100);
const point = chart.series[0].points[0];
point.update(value);
}, 1000);
5. 测量图应用
- CPU/内存/磁盘使用率
- 服务器负载监控
- 生产进度达成率
- 库存水位
Highcharts 树状图(Treemap)
Highcharts 树状图(Treemap)
树状图(treemap)用矩形面积表示数据大小,支持层级结构,适合展示占比与分类聚合。
1. 引入模块
<script src="https://code.highcharts.com/modules/treemap.js"></script>
2. 基本树状图
<div id="treemap-chart"></div>
<script>
Highcharts.chart("treemap-chart", {
chart: { type: "treemap" },
title: { text: "部门预算占比" },
series: [{
name: "预算",
data: [
{ name: "研发部", value: 40, color: "#3498db" },
{ name: "市场部", value: 25, color: "#2ecc71" },
{ name: "销售部", value: 20, color: "#f39c12" },
{ name: "行政部", value: 15, color: "#9b59b6" }
]
}]
});
</script>
3. 层级树状图
series: [{
name: "销售",
data: [{
name: "华东",
id: "east",
value: 50
}, {
name: "上海", parent: "east", value: 30
}, {
name: "江苏", parent: "east", value: 20
}, {
name: "华南",
id: "south",
value: 35
}, {
name: "广东", parent: "south", value: 25
}, {
name: "福建", parent: "south", value: 10
}]
}]
4. 显示数据标签
plotOptions: {
treemap: {
dataLabels: {
enabled: true,
format: "{point.name}<br>{point.value}"
},
borderColor: "#fff",
borderWidth: 2
}
},
tooltip: {
pointFormat: "{point.name}: {point.value} 万元"
}
5. 渐变颜色与点击
// 按数值渐变
colorAxis: {
minColor: "#e8f4fd",
maxColor: "#1e6fc2"
},
// 点击事件
series: [{
type: "treemap",
point: {
events: {
click: function() {
alert("点击了 " + this.name);
}
}
},
data: [...]
}]
6. 应用场景
- 预算/资源分配占比
- 流量来源分布
- 商品销售结构
- 磁盘空间占用分析
第 1 / 15 节