当前位置：首页 > React

react 热力图如何制作

2026-03-10 16:40:48React

安装依赖

使用 react-heatmap 或 react-heat-map 库可以快速实现热力图功能。通过 npm 或 yarn 安装：

npm install react-heatmap
# 或
yarn add react-heatmap

基础热力图实现

引入库并渲染基础热力图组件：

import HeatMap from 'react-heatmap';

function App() {
  const data = [
    { x: 1, y: 1, value: 10 },
    { x: 2, y: 2, value: 20 },
    // 更多数据点...
  ];

  return (
    <HeatMap
      data={data}
      width={500}
      height={300}
    />
  );
}

自定义样式

通过 gradient 和 cellStyle 属性调整颜色和单元格样式：

<HeatMap
  data={data}
  gradient={['#0000ff', '#ff0000']} // 从蓝到红的渐变
  cellStyle={(background, value, min, max) => ({
    background,
    fontSize: '11px',
    border: '1px solid #fff'
  })}
/>

时间序列热力图

使用 react-calendar-heatmap 可制作类似 GitHub 贡献日历的热力图：

react 热力图如何制作

npm install react-calendar-heatmap

示例代码：

import CalendarHeatmap from 'react-calendar-heatmap';

const dateValues = [
  { date: '2023-01-01', count: 5 },
  { date: '2023-01-02', count: 10 },
  // 更多日期数据...
];

<CalendarHeatmap
  startDate={new Date('2023-01-01')}
  endDate={new Date('2023-12-31')}
  values={dateValues}
  showWeekdayLabels
/>

地理热力图

结合 react-simple-maps 和 d3-scale-chromatic 实现地理分布热力图：

react 热力图如何制作

npm install react-simple-maps d3-scale-chromatic

实现示例：

import { Choropleth } from 'react-simple-maps';
import { scaleQuantize } from 'd3-scale';
import { schemeBlues } from 'd3-scale-chromatic';

const colorScale = scaleQuantize()
  .domain([0, 100])
  .range(schemeBlues[7]);

<Choropleth
  data={geoData}
  geography={geoJson}
  colorScale={colorScale}
  valueAccessor={d => d.value}
/>

性能优化

对于大数据集，建议：

使用 shouldComponentUpdate 或 React.memo 避免不必要的重渲染
通过 dataAggregation 降低数据密度
对静态数据启用 staticPlot 属性

交互功能

添加鼠标悬停提示框：

<HeatMap
  data={data}
  onMouseOver={(event, data) => {
    console.log(`Value: ${data.value}`);
  }}
  tooltip={(value, unit) => `${value} ${unit}`}
/>

标签: react