react+antd实现热力图绘制

要实现热力图绘制，我们可以使用第三方库react-heatmap-grid和antd来实现。

1. 安装依赖库

npm install react-heatmap-grid antd --save

2. 引入依赖库

import { HeatmapGrid } from 'react-heatmap-grid';
import { Slider } from 'antd';

3. 定义数据

const xLabels = new Array(24).fill(0).map((_, i) => `${i}`);
const yLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

const data = new Array(7).fill(0).map(() => new Array(24).fill(0).map(() => Math.floor(Math.random() * 100)));

4. 编写组件

class HeatMap extends React.Component {
  state = {
    value: 50,
  };

  render() {
    const { value } = this.state;

    return (
      <div>
        <Slider value={value} onChange={v => this.setState({ value: v })} />

        <HeatmapGrid
          data={data}
          xLabels={xLabels}
          yLabels={yLabels}
          squares
          height={50}
          onClick={(x, y) => alert(`Clicked ${x}, ${y}`)}
          cellStyle={(background, value, min, max, data, x, y) => ({
            background: `rgba(0, 151, 230, ${1 - (max - value) / (max - min)})`,
            fontSize: "11px",
            color: "#444"
          })}
          title={(value && `Value: ${value}`) || 'Click a square'}
        />
      </div>
    );
  }
}

ReactDOM.render(<HeatMap />, document.getElementById('root'));

以上代码实现了一个简单的热力图，通过Slider可以改变颜色深浅，通过onClick事件可以添加点击事件。具体可以根据自己的需求进行修改。