bizcharts图表封装之多面积图（带Slider）

一、可设置滚动条Slider的多面积图图表

组件功能设置说明：

    1、对于连续性图表（折线图、面积图等）建议为图表横坐标设置range属性（详见代码）；

    2、连续性图表建议设置 shape=“smooth”（实际情况看需求）；

   3、面积图中建议设置    <Geom  type="point" .../>，不设置会出现：

         图表中没有数据，只有坐标轴（看起来），但是鼠标悬浮到坐标轴内，会出现点

    产生原因：

             面和点的形成至少需要两条数据，如果只有一条，则只能形成一个点，而没有设置point，则什么都不显示

  4、多面积图中，面积之间会有重叠，导致不是很好看，所以，实际开发中，面积图中建议设置    <Geom  type="line" .../>，line的颜色和area的颜色一致，并且“area”中的颜色设置透明度。（详见代码）

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 IBubblesProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  legendName: string; // 图例对应的变量(数据中表示种类的字段)
  color?: string[];
  height?:number;
  maxLen?:number;
}

/**
 * 多面积图（两个及两个以上面积图，可设置滚动条）
 * @param props
 * @