54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import ReactECharts from "echarts-for-react";
|
|
|
|
interface LineChartProps {
|
|
title?: string;
|
|
xData: string[];
|
|
yData: number[];
|
|
height?: number | string;
|
|
}
|
|
|
|
const LineChart: React.FC<LineChartProps> = ({
|
|
title = "",
|
|
xData,
|
|
yData,
|
|
height = 200,
|
|
}) => {
|
|
const option = {
|
|
title: {
|
|
text: title,
|
|
left: "center",
|
|
textStyle: { fontSize: 16 },
|
|
},
|
|
tooltip: { trigger: "axis" },
|
|
xAxis: {
|
|
type: "category",
|
|
data: xData,
|
|
boundaryGap: false,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
boundaryGap: ["10%", "10%"], // 上下留白
|
|
min: (value: any) => value.min - 10, // 下方多留一点空间
|
|
max: (value: any) => value.max + 10, // 上方多留一点空间
|
|
minInterval: 1,
|
|
axisLabel: { margin: 12 },
|
|
},
|
|
series: [
|
|
{
|
|
data: yData,
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "circle",
|
|
lineStyle: { color: "#1677ff" },
|
|
itemStyle: { color: "#1677ff" },
|
|
},
|
|
],
|
|
grid: { left: 40, right: 24, top: 40, bottom: 32 },
|
|
};
|
|
|
|
return <ReactECharts option={option} style={{ height, width: "100%" }} />;
|
|
};
|
|
|
|
export default LineChart;
|