一、帶滾動條Slider的堆疊柱狀圖封裝
堆積柱狀圖和分組柱狀圖從代碼上看，只是堆積柱狀圖<Goem/>不需要設置just
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 IStackedColumnProps {
data: any[]; // 數據源
xAxis: string; // x軸座標
yAxis: string; // y軸座標
legendName: string; // 圖例對應的變量(數據中表示種類的字段)
color?: string[];
height?: number;
maxLen?: number;
}
/**
* 堆積柱狀圖（設置滾動條）
* @param props
* @constructor
*/
const StackedColumn: React.FC<IStackedColumnProps> = (props) => {
const {height = 400, xAxis, yAxis, data, maxLen, color, legendName} = props;
let flag: boolean = false;
let dv: any;
let ds: any;
// 獲取數據中橫座標的個數，作爲是否出現滾動條的依據；
if (maxLen) {
const xAxisData = [...new Set(data.map((item) => item[xAxis]))];
// 設置一個flag，用來判斷是否出現滾動條（以及是否需要處理數據）
flag = xAxisData.length > maxLen;
if (flag) {
const startLength = 0;
const endLength = maxLen - 1;
/*
此處處理區別於單條折線圖
初始化時，應取xAxisData中的第1個（index爲0）作爲start,取所能展示的最後一個（index爲max-1）作爲end
*/
ds = new DataSet({
state: {
start: xAxisData[startLength],
end: xAxisData[endLength],
},
});
dv = ds.createView()
.source(data)
.transform({
type: 'filter',
// eslint-disable-next-line consistent-return
callback: (obj: any) => filterSliderData(flag, ds, data, obj, xAxis),
});
}
}
return (
<>
<Chart height={height} data={dv || data} forceFit>
<Axis name={xAxis} />
<Axis name={yAxis} />
<Legend />
<Tooltip
/>
<Geom type="intervalStack"
position={`${xAxis}*${yAxis}`}
color={color ? [`${legendName}`, color] : legendName}
/>
</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 StackedColumn;
二、使用
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 {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 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}/>
</div>
);
}
export default ChartsIndex;