bizcharts图表封装之多折线图（带Slider）

一、带滚动条Slider的多折线图封装

import React from "react";
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Legend
} 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 ICuredProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  legendName: string; // 图例对应的变量(数据中表示种类的字段)
  color?: string[];
  height?:number;
  maxLen?:number;
}

/**
 * 多折线图（两条及两条以上折线图，可设置滚动条）
 * @param props
 * @constructor
 */
const Cured:React.FC<ICuredProps>=(props)=>{
  const {height=400,xAxis,yAxis,data,maxLen,color,legendName}=props;
  let flag:boolean=false;
  let dv:any;
  let ds:any;
  // 获取数据中横坐标的个数，作为是否出现滚动条的依据；
  if(maxLen){
    const xAxisData=