HTML仪表盘怎么制作热力图分布展示-html教程-PHP中文网

HTML仪表盘中热力图需依赖JS库：ECharts适配地理坐标（需中国地图JSON，数据格式为[经度,纬度,数值]），Highcharts适用于矩阵型热度（需colorAxis和二维数组），Leaflet+leaflet-heat适合轻量级地理点热力（输入为[纬度,经度,强度]）。

html仪表盘怎么制作热力图分布展示

heatmap 在 HTML 仪表盘中不是原生支持的图表类型，必须依赖 JavaScript 可视化库实现。直接写

 + CSS 渐变色模拟热力图，只适合静态、单点、示意性展示；真要表现地理分布、密度矩阵或时序热度，得用 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']。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

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])) 看一眼数值分布。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！