Bizchart图表封装之分组箱型图（自定义图例、设置Slider）

一、分组箱型图的封装

        先吐槽下官网分组箱形图的demo。

        让人凌乱的数据结构 。第一次使用分组箱形图，差一点就被官网demo的数据结构吓退，在群里面问了好久，慢慢的才反应过来，官网的数据居然是最原始的数据——后端没有处理前的数据，也就是说没有计算什么中位数、四分位数之前的数据。好吧，我承认我的想象力不够。好在写过基础箱型图，在基础箱型图的基础上得出分组箱型图的数据机构应该是比基础的多一个字段而已。

       哑口无言的tootip。看看官网的tooltip，你能看出什么意思吗？也还是借鉴基础箱型图的案例，最终实现了满意的tooltip。

      吐槽完毕，分组箱型图和其他分组xxx图的数据结构没什么不同——在基础XX图的基础上增加一个字段。麻烦一点的是tooltip，必须要自定义，这个参考下基础箱型图也能实现。在我看来，最麻烦的算是设置颜色了吧，其他图表可以有默认的颜色，也可以指定，指定的方式也很简单，给个color数组就行,但是分组箱型图中就不能这么简单粗暴了。分组箱形图中，需要设置style属性，这块目前只想到了写个方法来实现。

  function getCurrentColor(key: string): string {
    // 获取所有的图例信息
    const lendData = [...new Set(data.map(item => item[`${legendName}`]))];
    // 将所有的图例和颜色信息对应起来
    const resultMap = [];
    let result: string = '';
    for (let i = 0; i < lendData.length; i += 1) {
      const obj = {};
      obj[`${lendData[i]}`] = (colors && colors[i % 8]) || G2.Global.colors[i];
      resultMap.push(obj);
    }
    // 根据key获取当前的颜色
    if (resultMap && resultMap.length > 0) {
      const rr = resultMap.filter((item: any) => item[`${key}`]);
      if (rr && rr.length > 0) {
        result = rr[0][`${key}`];
      }
    }
    return result;
  }

        封装的具体代码：

import React from "react";
import {Axis, Chart, Geom, Legend, Tooltip} 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";
import styles from './GroupedBoxChart.less';


interface IGroupedBoxChartProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  legendName: string; // 图例对应的变量(数据中表示种类的字段)
  color?: string[];
  boxValue: string; // 代表值的字段  具体值的样式为 [number,number,number,number,number]
  height?:number;
  maxLen?:number;

}

/**
 * 分组箱型图（自定义图例，可设置滚动条）
 * @param props
 * @constructor
 */
const GroupedBoxChart: React.FC<IGroupedBoxChartProps> = (props) => {
  const {height=400,xAxis,boxValue,data,maxLen,color,legendName}=props;
  let flag:boolean=false;
  let