95 lines
2.1 KiB
TypeScript
95 lines
2.1 KiB
TypeScript
/**
|
|
* KRA - Line Chart Component
|
|
*/
|
|
import React, { useMemo } from 'react';
|
|
import BaseChart from './BaseChart';
|
|
import type { EChartsOption } from 'echarts';
|
|
|
|
interface SeriesItem {
|
|
name: string;
|
|
data: number[];
|
|
}
|
|
|
|
interface LineChartProps {
|
|
data?: { name: string; value: number }[];
|
|
series?: SeriesItem[];
|
|
xAxisData?: string[];
|
|
title?: string;
|
|
smooth?: boolean;
|
|
areaStyle?: boolean;
|
|
width?: string | number;
|
|
height?: string | number;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const LineChart: React.FC<LineChartProps> = ({
|
|
data,
|
|
series,
|
|
xAxisData,
|
|
title,
|
|
smooth = true,
|
|
areaStyle = false,
|
|
width,
|
|
height = 300,
|
|
loading,
|
|
}) => {
|
|
const option: EChartsOption = useMemo(() => {
|
|
// 支持两种数据格式
|
|
let seriesData: any[];
|
|
let xData: string[];
|
|
|
|
if (series && series.length > 0) {
|
|
// 使用 series 格式
|
|
seriesData = series.map((s) => ({
|
|
type: 'line',
|
|
name: s.name,
|
|
data: s.data,
|
|
smooth,
|
|
areaStyle: areaStyle ? {} : undefined,
|
|
}));
|
|
xData = xAxisData || [];
|
|
} else if (data && data.length > 0) {
|
|
// 使用 data 格式
|
|
seriesData = [
|
|
{
|
|
type: 'line',
|
|
data: data.map((item) => item.value),
|
|
smooth,
|
|
areaStyle: areaStyle ? {} : undefined,
|
|
},
|
|
];
|
|
xData = xAxisData || data.map((item) => item.name);
|
|
} else {
|
|
seriesData = [];
|
|
xData = [];
|
|
}
|
|
|
|
return {
|
|
title: title ? { text: title, left: 'center' } : undefined,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: series && series.length > 1 ? { data: series.map((s) => s.name) } : undefined,
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
boundaryGap: false,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: seriesData,
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
};
|
|
}, [data, series, xAxisData, title, smooth, areaStyle]);
|
|
|
|
return <BaseChart option={option} width={width} height={height} loading={loading} />;
|
|
};
|
|
|
|
export default LineChart;
|