react中使用heatmap.js实现热力图的绘制

// NPM 
npm i heatmapjs

// yarn 
yarn add heatmapjs

import h337 from 'heatmapjs'

// 创建热力图实例
const heatmapInstance = h337.create({ // 使用 h337 库创建一个热力图实例
  container: this.heatmapRef.current, // 将热力图渲染到指定的容器中
  radius: 25, // 设置热力图的半径大小为 25
  maxOpacity: .5, // 设置热力图的最大不透明度为 0.5
  minOpacity: 0, // 设置热力图的最小不透明度为 0
  blur: .75, // 设置热力图的模糊程度为 0.75
  level: 99, // 设置热力图的层级为 99,数值越大表示绘制越详细
});

// 热力图数据点
const data = [ 
  { x: 10, y: 20, value: 5 },
  { x: 30, y: 40, value: 10 },
  { x: 50, y: 60, value: 8 },
];

// 将数据传给热力图实例进行渲染
heatmapInstance.setData({ data: heatmapData }); 

import React, { Component, createRef } from 'react';
import h337 from 'heatmapjs';

class Heatmap extends Component {
  constructor (props){
    super(props)
    this.heatmapRef = createRef()
  }
  componentDidMount() {
    const heatmapInstance = h337.create({ // 使用 h337 库创建一个热力图实例
	  container: this.heatmapRef.current, // 将热力图渲染到指定的容器中
	  radius: 25, // 设置热力图的半径大小为 25
	  maxOpacity: .5, // 设置热力图的最大不透明度为 0.5
	  minOpacity: 0, // 设置热力图的最小不透明度为 0
	  blur: .75, // 设置热力图的模糊程度为 0.75
	  level: 99, // 设置热力图的层级为 99,数值越大表示绘制越详细
	});

	// 热力图数据点
    const data = [
      { x: 10, y: 20, value: 5 },
      { x: 30, y: 40, value: 10 },
      { x: 50, y: 60, value: 8 }
    ];
    
	// 将数据传给热力图实例进行渲染
    heatmapInstance.setData({ data })
  }
  
  render() {
    return (
      <div ref={this.heatmapRef} style={{ width: '100%', height: '100%' }} />
    )
  }
}

export default Heatmap