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

一、基础折线箱形图的封装

1、概念

           基础折线箱型图=箱型图+折线图，在箱型图的基础上增加折线图，折线图一般用来表示平均数。

2、封装说明

       同之前的基础箱型图，本次封装包括：自定义图例、滚动条Slider

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 IBasicBoxAndLineProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  avg: string; // 平均数
  boxValue: string; // 代表值的字段  具体值的样式为 [number,number,number,number,number]
  height?:number;
  maxLen?:number;
  colors?:[string,string]; // 图表的颜色，colors[0]:箱型图颜色；colors[1]:折线图颜色；
}

/**
 * 带平均数箱型图（在箱型图的基础上增加折线图（表示平均数））
 *   自定义tooltip比较麻烦，好在基础箱型图官网有自定义图例demo
 * @param props
 * @constructor
 */
const BasicBoxAndLine:React.FC<IBasicBoxAndLineProps>=(props)=>{
  const {height=400,xAxis,boxValue,data,maxLen,avg,colors=['#1890FF','#fdae6b']}=props;
  let flag:boolean=false;
  let ds:any;
  let dv:any;
  // 是否传入maxLen(有滚动条时必须传入)
  if(maxLen){
    // 设置一个flag，用来判断是否出现滚动条（以及是否需要处理数据）
    flag=data.length>maxLen;
    if(flag){
      const startLength = 0;
      const endLength = maxLen - 1;
      ds=new DataSet({
        state: {
          start: data[startLength][xAxis],
          end: data[endLength][xAxis],
        },
      });
      dv=ds.createView