93 lines
1.8 KiB
TypeScript
93 lines
1.8 KiB
TypeScript
import { Line } from '@ant-design/plots';
|
|
import EmptyData from './empty-data';
|
|
|
|
interface LineChartProps {
|
|
title?: string;
|
|
height?: number;
|
|
data: any[];
|
|
color?: string[];
|
|
xField?: string;
|
|
yField?: string;
|
|
locale?: string;
|
|
labelFormatter?: (v: any) => string;
|
|
slider?: any;
|
|
}
|
|
const LineChart: React.FC<LineChartProps> = (props) => {
|
|
const {
|
|
data,
|
|
title,
|
|
color,
|
|
xField,
|
|
locale,
|
|
yField,
|
|
slider,
|
|
height,
|
|
labelFormatter
|
|
} = props;
|
|
const config = {
|
|
title,
|
|
height,
|
|
xField: xField || 'time',
|
|
yField: yField || 'value',
|
|
// color: color || ['red', 'blue', 'green', 'yellow'],
|
|
colorField: 'type',
|
|
autoFit: true,
|
|
slider,
|
|
shapeField: 'smooth',
|
|
axis: {
|
|
x: {
|
|
textStyle: {
|
|
autoRoate: true
|
|
}
|
|
},
|
|
y: {
|
|
tick: false,
|
|
// size: 14,
|
|
// title: '%',
|
|
titlePosition: 'top',
|
|
titleFontSize: 12,
|
|
labelFormatter
|
|
}
|
|
},
|
|
// point: {
|
|
// shapeField: 'circle',
|
|
// sizeField: 2
|
|
// },
|
|
style: {
|
|
lineWidth: 1.5,
|
|
opacity: 0.7
|
|
// fill: (params: any) => {
|
|
// return params.color;
|
|
// }
|
|
// stroke: (params: any) => {
|
|
// console.log('line param=========', params.color);
|
|
// return params.color;
|
|
// }
|
|
},
|
|
legend: {
|
|
color: {
|
|
layout: { justifyContent: 'center' }
|
|
},
|
|
size: {
|
|
itemLabelFontSize: 14,
|
|
itemLabelFontWeight: 500
|
|
}
|
|
},
|
|
tooltip: {
|
|
title: 'time',
|
|
items: [{ channel: 'y' }]
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
{data.length === 0 ? (
|
|
<EmptyData height={height} title={title} />
|
|
) : (
|
|
<Line data={data} {...config} />
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LineChart;
|