bizcharts圖表封裝之基礎(單)面積圖(帶Slider)

一、可設置滾動條的基礎面積圖(單)組件封裝

組件功能設置說明:

    1、對於連續性圖表(折線圖、面積圖等)建議爲圖表橫座標設置range屬性(詳見代碼);

    2、連續性圖表建議設置 shape=“smooth”(實際情況看需求);

   3、面積圖中建議設置    <Geom  type="point" .../>,不設置會出現:

         圖表中沒有數據,只有座標軸(看起來),但是鼠標懸浮到座標軸內,會出現點

    產生原因:

             面和點的形成至少需要兩條數據,如果只有一條,則只能形成一個點,而沒有設置point,則什麼都不顯示

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 IBasicAreaProps {
  data: any[]; // 數據源
  xAxis: string; // x軸座標
  yAxis: string; // y軸座標
  height?:number;
  maxLen?:number;
}

/**
 * 基礎面積圖(單面積圖,可設置滾動條)
 * @param props
 * @constructor
 */
const BasicArea:React.FC<IBasicAreaProps>=(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),
        });
    }
  }

  const cols = {
  };
  // 對於像是折線圖、面積圖等連續圖表,建議爲橫座標設置range:[0,1]
  cols[xAxis]={
    range: [0, 1]
  }
  /*
            當沒有設置“point”時,會出現以下現象:
                如果數據只有一條,即data.length=1時:
                      ①、圖表中什麼也沒有②、鼠標懸浮時出現點及該點對應的數據
                      即鼠標移入圖表有數據移出沒有數據(用戶角度的現象)
            ===》建議面積圖中設置“point”(實際中看項目需求)
         * */
  return (
    <>
      <Chart height={height} data={dv||data}  scale={cols} forceFit>
        <Axis name={xAxis} />
        <Axis name={yAxis}  />
        <Tooltip
          crosshairs={{
            type: "y"
          }}
        />
        <Geom
        type="area"
        position={`${xAxis}*${yAxis}`}
        size={4}
        shape="smooth"
      />
        <Geom type="line" position={`${xAxis}*${yAxis}`} size={2}  shape="smooth"/>
        <Geom
          type="point"
          position={`${xAxis}*${yAxis}`}
          size={4}
          shape="circle"
        />
      </Chart>
      {
        flag &&<Slider
            onChange={(obj:any)=>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 BasicArea;

二、使用

import React,{memo}  from 'react';
import BasicLine from "@/pages/charts/compnent/BasicLine";
import Cured from "@/pages/charts/compnent/Curved";
import BasicColumn from "@/pages/charts/compnent/BasicColumn";
import GroupedColumn from "@/pages/charts/compnent/GroupedColumn";
import StackedColumn from "@/pages/charts/compnent/StackedColumn";
import BasicArea from "@/pages/charts/compnent/BasicArea";
import Bubbles from "@/pages/charts/compnent/Bubbles";

import {maxLen} from "@/pages/charts/utils/chartsCommon";

const BasicLineMemo=memo(BasicLine);
const CuredMemo=memo(Cured);
const BasicColumnMemo=memo(BasicColumn);
const GroupedColumnMemo=memo(GroupedColumn);
const StackedColumnMemo=memo(StackedColumn);
const BasicAreaMemo=memo(BasicArea);
const BubblesMemo=memo(Bubbles);

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 doubleData= [
  {
    month: "Jan",
    city: "Tokyo",
    temperature: 7
  },
  {
    month: "Jan",
    city: "London",
    temperature: 3.9
  },
  {
    month: "Feb",
    city: "Tokyo",
    temperature: 6.9
  },
  {
    month: "Feb",
    city: "London",
    temperature: 4.2
  },
  {
    month: "Mar",
    city: "Tokyo",
    temperature: 9.5
  },
  {
    month: "Mar",
    city: "London",
    temperature: 5.7
  },
  {
    month: "Apr",
    city: "Tokyo",
    temperature: 14.5
  },
  {
    month: "Apr",
    city: "London",
    temperature: 8.5
  },
  {
    month: "May",
    city: "Tokyo",
    temperature: 18.4
  },
  {
    month: "May",
    city: "London",
    temperature: 11.9
  },
  {
    month: "Jun",
    city: "Tokyo",
    temperature: 21.5
  },
  {
    month: "Jun",
    city: "London",
    temperature: 15.2
  },
  {
    month: "Jul",
    city: "Tokyo",
    temperature: 25.2
  },
  {
    month: "Jul",
    city: "London",
    temperature: 17
  },
  {
    month: "Aug",
    city: "Tokyo",
    temperature: 26.5
  },
  {
    month: "Aug",
    city: "London",
    temperature: 16.6
  },
  {
    month: "Sep",
    city: "Tokyo",
    temperature: 23.3
  },
  {
    month: "Sep",
    city: "London",
    temperature: 14.2
  },
  {
    month: "Oct",
    city: "Tokyo",
    temperature: 18.3
  },
  {
    month: "Oct",
    city: "London",
    temperature: 10.3
  },
  {
    month: "Nov",
    city: "Tokyo",
    temperature: 13.9
  },
  {
    month: "Nov",
    city: "London",
    temperature: 6.6
  },
  {
    month: "Dec",
    city: "Tokyo",
    temperature: 9.6
  },
  {
    month: "Dec",
    city: "London",
    temperature: 4.8
  }
];
const  basicColumnData = [
  {
    year: "1951 年",
    sales: 38
  },
  {
    year: "1952 年",
    sales: 52
  },
  {
    year: "1956 年",
    sales: 61
  },
  {
    year: "1957 年",
    sales: 145
  },
  {
    year: "1958 年",
    sales: 48
  },
  {
    year: "1959 年",
    sales: 38
  },
  {
    year: "1960 年",
    sales: 38
  },
  {
    year: "1962 年",
    sales: 38
  },
  {
    year: "1969 年",
    sales: 68
  }
];
const basicColumnData2=[
  {
    x: "分類一",
    y: [76, 100]
  },
  {
    x: "分類二",
    y: [56, 108]
  },
  {
    x: "分類三",
    y: [38, 129]
  },
  {
    x: "分類四",
    y: [58, 155]
  },
  {
    x: "分類五",
    y: [45, 120]
  },
  {
    x: "分類六",
    y: [23, 99]
  },
  {
    x: "分類七",
    y: [18, 56]
  },
  {
    x: "分類八",
    y: [18, 34]
  }
];
const ChartsIndex:React.FC<{}>=()=>{

  return(
    <div style={{background:'white'}}>
      <h1>bizCharts圖表封裝</h1>
      <h2>折線圖-單條</h2>
      <BasicLineMemo data={basicLineData} xAxis='year' yAxis='value' maxLen={maxLen}/>
      <h2>折線圖-多條</h2>
      <CuredMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/>
      <h2>柱狀圖-單條</h2>
      <BasicColumnMemo data={basicColumnData} xAxis="year" yAxis="sales"  maxLen={maxLen}/>
      <h2>柱狀圖-單條-區間柱狀圖:區別只是數據(格式)不同</h2>
      <BasicColumnMemo data={basicColumnData2} xAxis="x" yAxis="y"  maxLen={maxLen}/>
      <h2>柱狀圖-多條</h2>
      <GroupedColumnMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/>
      <h2>面積圖-多條-堆疊柱狀圖</h2>
      <StackedColumnMemo data={doubleData} xAxis="month" yAxis="temperature" legendName="city" maxLen={maxLen}/>
      <h2>面積圖-單-基礎面積圖</h2>
      <BasicAreaMemo  data={basicLineData} xAxis='year' yAxis='value' maxLen={maxLen}/>
      </div>
  );
}
export default ChartsIndex;

三、涉及到的公共方法

    https://mp.csdn.net/console/editor/html/106548389

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章