bizchart图表封装之多条折线图
多条折线图：
顾名思义，有多条折线
封装：
数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色
注意：
1、代码使用TypeScript实现
2、本次代码实现的均是曲线折线图，若只想是折线图，将去掉
3、数据源data最好处理成类似{type:'type',name:'name',value:'value'}这种格式，不需要使用transform，就可以直接使用
代码：
import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
/**
*分组折线图
*/
interface ICurvedProps {
data: any; // 数据源
xAxis: string; // x轴坐标
yAxis: string; // y轴坐标
showTitle?: boolean; // 是否显示坐标轴的title
titleOffset?: number | undefined;
xNickName?: string;
yNickName?: string;
legendName: string; // 图例对应的变量
color?: string[];
yRang?: number[]; // 限定y轴的数据范围
format?: string; // 格式化文本内容--单位 比如 m 、kg、%
}
const Curved: React.FC = props => {
const {
data,
xAxis,
yAxis,
showTitle,
xNickName,
yNickName,
legendName,
color,
yRang,
format,
} = props;
const cols: {
[key: string]: { [key: string]: string | number | string[] | number[] | any };
} = {};
cols[xAxis] = {
alias: showTitle && xNickName ? xNickName : xAxis,
};
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 (
{showTitle ? (
);
};
export default Curved;
如果数据多了，显示不下怎么办？
带滚动条的多条曲线折线图：
思考：滚动条的数据条数和折线图的数据条数一样吗？
import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import DataSet from '@antv/data-set';
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import Slider from 'bizcharts-plugin-slider';
/**
*分组折线图
*/
interface ISliderCurvedProps {
data: any; // 数据源
sliderData: any[]; // 滚动条数据源
xAxis: string; // x轴坐标
yAxis: string; // y轴坐标
showTitle?: boolean; // 是否显示坐标轴的title
titleOffset?: number | undefined;
xNickName?: string;
yNickName?: string;
legendName: string; // 图例对应的变量
color?: string[];
yRang?: number[]; // 限定y轴的数据范围
format?: string; // 格式化文本内容--单位 比如 m 、kg、%
max: number; // 多长以后出现滚动条
}
const SliderCurved: React.FC = props => {
const {
data,
sliderData,
xAxis,
yAxis,
showTitle,
xNickName,
yNickName,
legendName,
color,
yRang,
format,
max,
} = props;
const cols: {
[key: string]: { [key: string]: string | number | string[] | number[] | any };
} = {};
cols[xAxis] = {
alias: showTitle && xNickName ? xNickName : xAxis,
};
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 = sliderData.length;
let ds: any;
let dv: any;
if (len > max) {
const startLength = 0;
const endLength = max - 1;
ds = new DataSet({
state: {
start: sliderData[startLength][xAxis],
end: sliderData[endLength][xAxis],
},
});
} else {
ds = new DataSet({
state: {
start: '',
end: '',
},
});
}
// eslint-disable-next-line prefer-const
dv = ds.createView().source(data);
if (len > max) {
dv.transform({
type: 'filter',
// eslint-disable-next-line consistent-return
callback: (obj: any) => {
if (len > max) {
// 获取开始节点的下标值
const { start } = ds.state;
const startIndex = sliderData.findIndex((value: any) => value[xAxis] === start);
// 获取末尾节点下标值
const { end } = ds.state;
const endIndex = sliderData.findIndex((value: any) => value[xAxis] === end);
if (startIndex > -1 && endIndex > -1) {
const filterData = sliderData.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: any) {
const { startValue, endValue } = obj;
ds.setState('start', startValue);
ds.setState('end', endValue);
}
return (
{showTitle ? (
{sliderData.length > max ? (