HTML仪表盘中热力图需依赖JS库：ECharts适配地理坐标（需中国地图JSON，数据格式为[经度,纬度,数值]），Highcharts适用于矩阵型热度（需colorAxis和二维数组），Leaflet+leaflet-heat适合轻量级地理点热力（输入为[纬度,经度,强度]）。
heatmap 在 HTML 仪表盘中不是原生支持的图表类型，必须依赖 JavaScript 可视化库实现。直接写 <div> + CSS 渐变色模拟热力图，只适合静态、单点、示意性展示；真要表现地理分布、密度矩阵或时序热度，得用 <code>ECharts、Highcharts 或 Leaflet + 插件。
用 ECharts 快速渲染带地理坐标的热力图
ECharts 对热力图（series.type: 'heatmap'）和地理坐标（geo 或 map）支持最成熟，尤其适配中国省市数据。
- 必须加载中国地图 JSON（如
echarts/map/js/china.js），否则type: 'map'会报undefined map - 热力图数据格式严格：数组项必须是
[经度, 纬度, 数值]，不能是{name: '北京', value: 120}这类对象（除非配convertToGeo） - 若用
geo坐标系（推荐），需手动设置geo.coordinateSystem = 'geo'，且系列coordinateSystem: 'geo' - 颜色映射靠
visualMap控制，min/max不设会导致颜色全部压成一个色阶
option = {
geo: {
type: 'geo',
map: 'china',
roam: true
},
series: [{
type: 'heatmap',
coordinateSystem: 'geo',
data: [[116.46, 39.92, 82], [121.48, 31.22, 145], [113.27, 23.13, 97]]
}],
visualMap: {
min: 0,
max: 200,
show: true
}
};
Highcharts 热力图不显示颜色？检查 data 和 colorAxis
Highcharts 的 heatmap 类型本质是二维矩阵图（X/Y 分类 + Z 数值），不支持经纬度直绘地图，适合展示“省份 × 年份”、“设备类型 × 故障等级”这类表格型热度。
- 数据必须是二维数组：
[[x, y, value], ...]，其中x、y是索引或分类名（非坐标） - 若用字符串做坐标轴标签，需在
xAxis.categories和yAxis.categories显式声明 -
colorAxis是热力图核心，漏掉就全灰；它默认共享，多个热力图系列要设colorAxis: 0避免冲突 - 性能敏感：超过 50×50 矩阵建议开启
boost: true，否则渲染卡顿
常见错误：Uncaught TypeError: Cannot read property 'length' of undefined —— 多半是 data 没传数组，或传了对象数组但没配 keys: ['x', 'y', 'value']。
立即学习“前端免费学习笔记（深入）”；
Leaflet + leaflet-heat 实现轻量级地理热力点
如果只需在地图上撒点（比如用户点击热区、GPS 轨迹密度），leaflet-heat 是最小依赖方案（仅 4KB）。
- 不依赖任何图表库，只要
Leaflet+leaflet-heat.js - 输入数据是二维数组：
[[lat, lng, intensity], ...]，intensity 可选（默认为 1） -
radius和blur决定“热扩散”效果，radius: 25+blur: 30是国内城市级常用组合 - 缺点：无图例、无交互提示、不支持缩放自适应（需监听
zoomend手动重绘）
const heat = L.heatLayer([
[39.92, 116.46, 0.8],
[31.22, 121.48, 1.2],
[23.13, 113.27, 0.9]
], { radius: 25, blur: 30 });
map.addLayer(heat);
为什么你的热力图颜色没变化？优先查这三处
-
visualMap（ECharts）或colorAxis（Highcharts）是否配置了min/max？数值范围太窄或全零会导致色阶失效 - 数据中的数值列是不是字符串？
'120'和120在heatmap渲染中行为不同，后者才参与颜色计算 - 地图投影是否匹配？用
geo坐标系却传 WGS84 经纬度是 OK 的，但若数据是 GCJ-02 偏移坐标，热力点会整体偏移几十公里
真实项目里，80% 的“热力图不显色”问题出在数据类型和 visualMap 范围没对齐——别急着换库，先 console.log(data.map(d => d[2])) 看一眼数值分布。
