一、热力图-色块图组件封装
第一次热力图中的色块图时,差点被官网demo的数据格式吓退了。但是既然产品选择了,作为开发,只能尽最大努力来实现了。于是和同事讨论这个数据格式,照着官网处理后的数据格式,感觉每个数据都要给定具体的做标点才行,这!又一次觉得实现不了。好在没有放弃,继续做各种测试,最后恍然大悟,其实热力图的数据结构和普通的做柱状/折线图没啥区别。
时隔快一年了,当初做的项目现在已经进入了迭代的死循环。而再回头看看当初困扰自己的热力图,似乎还是有些陌生,再看看官网demo,还是搞不明白。想骂自己太笨了,自己写的代码都看不太明白,可又想到以后这可能会成为常态,行吧,也罢,随它吧。
热力图-色块图组件封装(可设置滚动条Slider)
import React from "react";
import {
Chart,
Geom,
Axis,
Tooltip,
Label,
} from "bizcharts";
// @ts-ignore
import Slider from 'bizcharts-plugin-slider';
// @ts-ignore
import DataSet from '@antv/data-set';
import {dealSliderChange, filterSliderData} from "@/pages/charts/utils/chartsCommon";
interface IBasicHeatMapProps {
data: any[]; // 数据源
xAxis: string; // x轴坐标
yAxis: string; // y轴坐标
height?:number;
legendName: string; // 图例对应的变量(数据中表示种类的字段) 热力图中的图例一般用连续型图例
color?: string;// 色块的颜色 ,不填时,使用默认颜色
maxLen?:number;
}
/**
* 基础热力图-色块图
* @param props
* @constructor
*/
const BasicHeatMap:React.FC<IBasicHeatMapProps>=(props)=>{
const {height=400,xAxis,yAxis,data,legendName, color = '#BAE7FF-#1890FF-#0050B3',maxLen}=props;
let flag:boolean=false;
let ds:any;
let dv:any;
// 是否传入maxLen(有滚动条时必须传入)
if(maxLen){
// 设置一个flag,用来判断是否出现滚动条(以及是否需要处理数据