bizcharts图表封装之基础折线图
慕凡
基础折线图：
由点（point）和线(line)组成
封装：
数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色
注意：
bizcharts中单（柱状/折线）图默认不显示图例===》如果需要显示图例，需要自定义图例;代码使用TypeScript实现
代码：
import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
/**
*基础折线图
*/
interface IBasicProps {
data: any; // 数据源
xAxis: string; // x轴坐标
yAxis: string; // y轴坐标
showTitle?: boolean; // 是否显示坐标轴的title
titleOffset?: number | undefined;
xNickName?: string;
yNickName?: string;
color?: string;
yRang?: number[]; // 限定y轴的数据范围
xRang?: number[]; // 限定X轴的数据范围
format?: string; // 格式化文本内容--单位 比如 m 、kg、%
legendMakerFill?: string; // 自定义图例的颜色
}
const Basic: React.FC<IBasicProps> = props => {
const {
data,
xAxis,
yAxis,
showTitle,
xNickName,
yNickName,
color,
yRang,
xRang,
format,
legendMakerFill,
} = props;
const cols: {
[key: string]: { [key: string]: string | number | string[] | number[] | any };
} = {};
cols[xAxis] = {
alias: showTitle && xNickName ? xNickName : xAxis,
};
if (xRang) {
cols[xAxis].ticks = xRang;
}
cols[yAxis] = {
min: 0,
alias: showTitle && yNickName ? yNickName : yAxis,
formatter: (val: number): number | string => {
if (format && val > 0) {
return `${val}${format}`;
}
return val;
}, // 格式化文本内容，会影响到轴的label格式;
};
if (yRang) {
cols[yAxis].ticks = yRang;
}
/* 坐标轴字体样式 */
const axisLabelStyle: G2.AxisLabel = {
textStyle: {
fill: '#FFFFFF', // 文本的颜色
},
};
return (
<div>
<Chart height={400} data={data} scale={cols} forceFit padding="auto">
<Legend
textStyle={{
textAlign: 'start', // 文本对齐方向，可取值为： start middle end
fill: '#FFF', // 文本的颜色
}}
custom
items={[
{
value: yNickName,
marker: {
symbol: 'hyphen',
stroke: legendMakerFill || '#1890FF',
radius: 5,
lineWidth: 3,
},
},
]}
position="top-center"
/>
{showTitle ? (
<Axis
name={xAxis}
label={axisLabelStyle}
title={{
offset: 40,
textStyle: {
textAlign: 'right',
fill: '#FFF',
},
position: 'end',
}}
/>
) : (
<Axis name={xAxis} label={axisLabelStyle} />
)}
{showTitle ? (
<Axis
name={yAxis}
label={axisLabelStyle}
title={{
offset: 40,
textStyle: {
textAlign: 'right',
fill: '#FFF',
},
position: 'end',
}}
/>
) : (
<Axis name={yAxis} label={axisLabelStyle} />
)}
<Tooltip
crosshairs={{
type: 'y',
}}
/>
{color ? (
<Geom type="line" position={`${xAxis}*${yAxis}`} shape="smooth" size={2} color={color} />
) : (
<Geom type="line" position={`${xAxis}*${yAxis}`} shape="smooth" size={2} />
)}
{color ? (
<Geom
type="point"
color={color}
position={`${xAxis}*${yAxis}`}
size={4}
shape="circle"
style={{
stroke: '#fff',
lineWidth: 1,
}}
/>
) : (
<Geom
type="point"
position={`${xAxis}*${yAxis}`}
size={4}
shape="circle"
style={{
stroke: '#fff',
lineWidth: 1,
}}
/>
)}
</Chart>
</div>
);
};
export default Basic;
当数据过多时，屏幕显示不下怎么办？
带滚动条Slider的基础折线图：
import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import Slider from 'bizcharts-plugin-slider';
import DataSet from '@antv/data-set';
/**
*基础折线图（带滚动条）
*/
interface ISliderBasicProps {
data: any; // 数据源
xAxis: string; // x轴坐标
yAxis: string; // y轴坐标
showTitle?: boolean; // 是否显示坐标轴的title
titleOffset?: number | undefined;
xNickName?: string;
yNickName?: string;
color?: string;
yRang?: number[]; // 限定y轴的数据范围
xRang?: number[]; // 限定X轴的数据范围
format?: string; // 格式化文本内容--单位 比如 m 、kg、%
legendMakerFill?: string; // 自定义图例的颜色
max: number; // 多长以后出现滚动条
}
const SliderBasic: React.FC<ISliderBasicProps> = props => {
const {
data,
xAxis,
yAxis,
showTitle,
xNickName,
yNickName,
color,
yRang,
xRang,
format,
legendMakerFill,
max,
} = props;
const cols: {
[key: string]: { [key: string]: string | number | string[] | number[] | any };
} = {};
cols[xAxis] = {
alias: showTitle && xNickName ? xNickName : xAxis,
};
if (xRang) {
cols[xAxis].ticks = xRang;
}
cols[yAxis] = {
min: 0,
alias: showTitle && yNickName ? yNickName : yAxis,
formatter: (val: number): number | string => {
if (format && val > 0) {
return `${val}${format}`;
}
return val;
}, // 格式化文本内容，会影响到轴的label格式;
};
if (yRang) {
cols[yAxis].ticks = yRang;
}
/* 坐标轴字体样式 */
const axisLabelStyle: G2.AxisLabel = {
textStyle: {
fill: '#FFFFFF', // 文本的颜色
},
};
const len = data.length;
let ds: any;
let dv: any;
if (len > max) {
const startLength = 0;
const endLength = max - 1;
ds = new DataSet({
state: {
start: data[startLength][xAxis],
end: data[endLength][xAxis],
},
});
} else {
ds = new DataSet({
state: {
start: '',
end: '',
},
});
}
// eslint-disable-next-line prefer-const
dv = ds
.createView()
.source(data)
.transform({
type: 'filter',
// eslint-disable-next-line consistent-return
callback: (obj: any) => {
if (len > max) {
// 获取开始节点的下标值
const { start } = ds.state;
const startIndex = data.findIndex((value: any) => value[xAxis] === start);
// 获取末尾节点下标值
const { end } = ds.state;
const endIndex = data.findIndex((value: any) => value[xAxis] === end);
if (startIndex > -1 && endIndex > -1) {
const filterData = data.slice(startIndex, endIndex + 1);
const filterIndex = filterData.findIndex((value: any) => value[xAxis] === obj[xAxis]);
if (filterIndex > -1) {
return obj;
}
}
} else {
return obj;
}
},
});
function onChange(obj: { startText: any; endText: any }) {
const { startText, endText } = obj;
ds.setState('start', startText);
ds.setState('end', endText);
}
return (
<div>
<Chart height={400} data={dv} scale={cols} forceFit padding="auto">
<Legend
textStyle={{
textAlign: 'start', // 文本对齐方向，可取值为： start middle end
fill: '#FFF', // 文本的颜色
}}
custom
items={[
{
value: yNickName,
marker: {
symbol: 'hyphen',
stroke: legendMakerFill || '#1890FF',
radius: 5,
lineWidth: 3,
},
},
]}
position="top-center"
/>
{showTitle ? (
<Axis
name={xAxis}
label={axisLabelStyle}
title={{
offset: 40,
textStyle: {
textAlign: 'right',
fill: '#FFF',
},
position: 'end',
}}
/>
) : (
<Axis name={xAxis} label={axisLabelStyle} />
)}
{showTitle ? (
<Axis
name={yAxis}
label={axisLabelStyle}
title={{
offset: 40,
textStyle: {
textAlign: 'right',
fill: '#FFF',
},
position: 'end',
}}
/>
) : (
<Axis name={yAxis} label={axisLabelStyle} />
)}
<Tooltip
crosshairs={{
type: 'y',
}}
/>
{color ? (
<Geom type="line" position={`${xAxis}*${yAxis}`} shape="smooth" size={2} color={color} />
) : (
<Geom type="line" position={`${xAxis}*${yAxis}`} shape="smooth" size={2} />
)}
{color ? (
<Geom
type="point"
color={color}
position={`${xAxis}*${yAxis}`}
size={4}
shape="circle"
style={{
stroke: '#fff',
lineWidth: 1,
}}
/>
) : (
<Geom
type="point"
position={`${xAxis}*${yAxis}`}
size={4}
shape="circle"
style={{
stroke: '#fff',
lineWidth: 1,
}}
/>
)}
</Chart>
{data.length > max ? (
<Slider
height={15}
width="auto"
xAxis={xAxis}
yAxis={yAxis}
data={data}
onChange={onChange}
start={ds.state.start}
end={ds.state.end}
padding={[50]}
textStyle={{
fontSize: '0',
}}
backgroundChart={{
type: 'heatmap',
}}
/>
) : null}
</div>
);
};
export default SliderBasic;
类似资料：