热力图之heatmap.js库

安装依赖

npm install heatmap.js

基本属性

---

全局对象 h337

方法/属性	描述
h337.create(configObject)	创建热力图实例，需传入配置对象（configObject），返回heatmapInstance对象。

---

配置对象 configObject 属性

属性名	中文翻译	含义	是否必需	默认值	用法示例
container	容器	DOM节点，热力图将在此节点内渲染并自适应大小。	是	无	document.getElementById('heatmapContainer')
backgroundColor	背景颜色	背景颜色（支持16进制、颜色名、RGB/RGBA格式）。	否	透明	"#FFFFFF" 或 "rgba(0,0,0,0.5)"
gradient	渐变配置	自定义渐变色（格式：{ "0.5": "blue", "0.8": "red" }）。	否	默认渐变	{ '.5': 'blue', '.8': 'red' }
radius	半径	数据点的默认半径（若数据点未单独指定）。	否	40	10
opacity	整体不透明度	全局不透明度（范围[0,1]，覆盖maxOpacity和minOpacity）。	否	0.6	0.5
maxOpacity	最大不透明度	最大值对应的不透明度（若未设置opacity时生效）。	否	0.6	0.8
minOpacity	最小不透明度	最小值对应的不透明度（若未设置opacity时生效）。	否	0	0.1
onExtremaChange	极值变化回调	当数据极值变化时触发的回调函数。	否	无	function(data) { console.log(data); }
blur	模糊度	模糊系数（范围[0,1]，值越大渐变越平滑）。	否	0.85	0.75
xField	x坐标字段名	数据点中表示x坐标的属性名。	否	"x"	"positionX"
yField	y坐标字段名	数据点中表示y坐标的属性名。	否	"y"	"positionY"
valueField	值字段名	数据点中表示值的属性名。	否	"value"	"intensity"

---

热图实例 heatmapInstance 方法

方法名	参数	返回值	描述	示例
addData(data)	object 或 array	heatmapInstance	动态添加单个或多个数据点。	addData({ x: 10, y: 20, value: 100 })
setData(data)	{ min, max, data }	heatmapInstance	初始化数据集（需包含min、max和data）。	setData({ min: 0, max: 100, data: [...] })
setDataMax(number)	number	heatmapInstance	设置数据集最大值，触发全量重绘。	setDataMax(200)
setDataMin(number)	number	heatmapInstance	设置数据集最小值，触发全量重绘。	setDataMin(-50)
configure(config)	configObject	heatmapInstance	重新配置热力图并重绘。	configure({ radius: 20 })
getValueAt(point)	{ x, y }	number	获取某坐标处的插值（基于渐变的混合值）。	getValueAt({ x: 10, y: 10 })
getData()	无	object	导出可持久化的数据集（用于setData）。	var data = getData()
getDataURL()	无	string	生成热力图的Base64数据URL。	var url = getDataURL()
repaint()	无	heatmapInstance	强制重绘整个热力图。	repaint()

---

示例配置