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

一、带滚动条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 IBasicLineProps {
  data: any[]; // 数据源
  xAxis: string; // x轴坐标
  yAxis: string; // y轴坐标
  height?:number;
  maxLen?:number;
}

/**
 * 基础折线图（单折线图，可设置滚动条）
 * @param props
 * @constructor
 */
const BasicLine:React.FC=(props)=>{
  const {height=400,xAxis,yAxis,data,maxLen}=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()
        .source(data)
        .transform({
          type: 'filter',
          // eslint-disable-next-line consistent-return
          callback: (obj: any) =>   filterSliderData(flag,ds,data,obj,xAxis),
        });
    }
  }



  return (
    <>
      
        
        
        
        
        
      
      {
        flag &&dealSliderChange(obj,ds)}
          height={20}
          width="auto"
          xAxis={xAxis}
          yAxis={yAxis}
          data={data}
          start={ds.state.start}
          end={ds.state.end}
          padding={[50]}
          textStyle={{
            fontSize: '0',
          }}
          backgroundChart={{
            type: 'heatmap',
          }}
        />
      }
    
  );
}


export default BasicLine;

二、使用

import React,{memo}  from 'react';
import BasicLine from "@/pages/charts/compnent/BasicLine";
import {maxLen} from "@/pages/charts/utils/chartsCommon";

const BasicLineMemo=memo(BasicLine);

const basicLineData= [
  {
    year: "1991",
    value: 3
  },
  {
    year: "1992",
    value: 4
  },
  {
    year: "1993",
    value: 3.5
  },
  {
    year: "1994",
    value: 5
  },
  {
    year: "1995",
    value: 4.9
  },
  {
    year: "1996",
    value: 6
  },
  {
    year: "1997",
    value: 7
  },
  {
    year: "1998",
    value: 9
  },
  {
    year: "1999",
    value: 13
  }
];
const ChartsIndex:React.FC<{}>=()=>{
  return(
    

      
bizCharts图表封装
      
折线图
      
      
  );
}
export default ChartsIndex;

 

三、涉及到的公共方法

    https://blog.csdn.net/wuChiSha/article/details/106548389