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

一、基础箱形图的封装

          根据数据的类型，也可以将基础箱型图分为两种：

①、"数组型"：即其每天item对应的数值为数组（[number,number,number,number,number]）,

          eg:     

const boxData=[
    {
     x:'一月',
     boxValue:[0,1,4,7,9]
   },...]

②“数字型”：即其每个item对应的数据是数字，

  eg:

  const data = [
      {
        x: "一月",
        low: 0,
        q1: 1,
        median: 4,
        q3: 7,
        high: 9
      },...]

  这种数据格式，最终还是会转换为第一种（"数组型"），详见官网demo(https://bizcharts.net/product/bizcharts/demo/186),故，个人在开发中更倾向于第一种数据格式，这样数据拿来就用，不需要任何转换操作，当然，这需要后端配合。

    本次封装采用第一种数据格式：

import React from "react";
import {
  Chart,
  Geom,
  Axis,
  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";

interface IBasicBoxProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  boxValue: string; // 代表值的字段  具体值的样式为 [number,number,number,number,number]
  height?:number