图表 - 热图

热图图表通过颜色变化直观地表示数据，以突出显示跨两个维度的模式和趋势。

基础知识

热图需要两个带有 data 属性的坐标轴。这些数据定义了 x 和 y 类别。

系列 data 是一个由 3 元组组成的数组。前两个数字分别是单元格的 x 和 y 索引。第三个是它的值。

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

按 Enter 键开始编辑

自定义

颜色映射

要自定义颜色映射，请使用 zAxis 配置。您可以使用分段或连续的颜色映射。

高亮

您可以选择通过将 highlightScope.highlight 设置为 'item' 来高亮显示悬停的元素。要淡化其他项目，请将 highlightScope.fade 设置为 'global'。

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

按 Enter 键开始编辑

默认情况下，高亮/淡化效果是通过将 CSS 属性 filter: saturate(...) 应用于单元格获得的。要修改此样式，请使用 heatmapClasses.highlighted 和 heatmapClasses.faded CSS 类来覆盖应用的样式。

在以下演示中，我们用边框半径替换了高亮饱和度，并降低了淡化单元格的饱和度。

坐标轴

热图坐标轴可以像任何其他图表坐标轴一样进行自定义。可用选项在专用页面中提供。

图例 🚧

标签 🚧

自定义项

<Heatmap
  slots={{ cell: CustomCell }}
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

<Heatmap
  slots={{ cell: CustomCell }}
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

按 Enter 键开始编辑

API

请参阅下面的文档，以获得此处提及的组件的所有 props 和类的完整参考。