前言
@bizcharts/heatmap-heatmap 是一个基于 BizCharts 的热力图插件，通过此插件可以快速创建出热力图，并且可以高度定制化。
安装
使用 npm 安装 @bizcharts/heatmap-heatmap：
npm install @bizcharts/heatmap-heatmap
开始使用
引入
import Heatmap from '@bizcharts/heatmap-heatmap';
数据格式
Heatmap 的数据格式如下：
-- -------------------- ---- -------
----- ---- - -
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
--基础示例
Heatmap 支持的属性如下：
- data，数据；
- xField，x 轴字段，默认为 ‘x’；
- yField，y 轴字段，默认为 ‘y’；
- colorField，填充颜色字段，对应 Heatmap 中的 color 字段，默认为 ‘value’；
- sizeRatio，网格宽度与高度比例，默认为 0.75；
- range，颜色分段区间，默认为 [‘#f0f9e8’, ‘#bae4bc’, ‘#7bccc4’, ‘#43a2ca’]；
- legend，图例配置，默认为 true。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------- ------- - ---- ------------------
------ -------- ---- -------------------------------
------ ------- ---- -----------------------------
----- ---- - -
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
-
-- -----
-- -----
------ ---
--
--
----- -- - --- ------------------------
--------------
----- -------
------- ------
---
----- ---- - -
------ -
------ ------
--
-- -
---------- --
--
--
----- ----- ------- --------------- -
-------- -
----- - ------ - --- - - -----------
------ -
------ --------------- --------- ------------ --------
-------- ----------------- --
-------- -------------- ------------------ ---------------- ------------------ ---------- ---------- ----------- --
------- --------------- ----------------- --
--------
--
-
-
------ ------- ------总结
@bizcharts/heatmap-heatmap 热力图插件是一个非常实用的前端组件，可以在数据可视化的场景中发挥重要作用。通过本文的介绍，希望读者能够对该插件的使用有一个基本的了解。同时，该插件还有很多高级用法，建议读者继续深入学习，以便更好地将其应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f96