9b3181576f
添加项目基础文件结构、路由配置、API接口和核心组件 实现登录认证、权限控制、WebSocket通信等基础功能 引入antd-mobile UI组件库和Vite构建工具 配置TypeScript、ESLint、Prettier等开发环境 添加移动端适配方案和全局样式 完成首页、工作台、个人中心等基础页面框架
58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import ReactECharts from "echarts-for-react";
|
|
import { getChartColor } from "@/utils/chartColors";
|
|
|
|
interface LineChartProps {
|
|
title?: string;
|
|
xData: string[];
|
|
yData: any[];
|
|
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: [
|
|
...yData.map((item, index) => {
|
|
const color = getChartColor(index);
|
|
return {
|
|
data: item,
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "circle",
|
|
lineStyle: { color },
|
|
itemStyle: { color },
|
|
};
|
|
}),
|
|
],
|
|
grid: { left: 40, right: 24, top: 40, bottom: 32 },
|
|
};
|
|
|
|
return <ReactECharts option={option} style={{ height, width: "100%" }} />;
|
|
};
|
|
|
|
export default LineChart;
|