bizcharts图表封装之分组柱状图（带Slider）

最新推荐文章于 2023-12-13 13:15:31 发布

懒得懒

最新推荐文章于 2023-12-13 13:15:31 发布

阅读量1.1k

点赞数

分类专栏： bizchart 前端工具

本文链接：https://blog.csdn.net/wuChiSha/article/details/106624985

版权

本文介绍了如何将bizcharts库的分组柱状图与Slider组件结合，实现图表的滚动查看功能。详细内容包括封装过程、使用方法及关键的公共方法介绍。

摘要由CSDN通过智能技术生成

一、带滚动条Slider的分组柱状图封装

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

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