一、可設置滾動條的基礎面積圖(單)組件封裝
組件功能設置說明:
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;