一、可设置滚动条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
* @