瀏覽代碼

feat(app): 新增实时趋势折线图组件

- 添加 RealtimeLine 组件,用于展示实时趋势数据
- 组件支持自定义标题、X 轴数据和 Y 轴数据
- 使用 ECharts 实现折线图,具有平滑曲线和区域填充效果
nahida 9 月之前
父節點
當前提交
9fa35503c3
共有 1 個文件被更改,包括 29 次插入0 次删除
  1. 29 0
      app/(other)/test7/components/realtime-line.tsx

+ 29 - 0
app/(other)/test7/components/realtime-line.tsx

@@ -0,0 +1,29 @@
+"use client"
+import ReactECharts from "echarts-for-react"
+import type {FC} from "react"
+
+const RealtimeLine: FC<{ title?: string; xs: string[]; ys: number[] }> = ({ title = "实时趋势", xs = [], ys = [] }) => {
+  const option = {
+    title: { text: title, left: "center", textStyle: { fontSize: 12, fontWeight: 500 } },
+    tooltip: { trigger: "axis" },
+    grid: { left: 40, right: 16, top: 32, bottom: 32 },
+    xAxis: { type: "category", boundaryGap: false, data: xs },
+    yAxis: { type: "value", name: "" },
+    series: [
+      {
+        name: "value",
+        type: "line",
+        smooth: true,
+        symbol: "none",
+        areaStyle: {
+          color: "rgba(34,197,94,0.15)",
+        },
+        lineStyle: { color: "#22c55e", width: 2 },
+        data: ys,
+      },
+    ],
+  }
+  return <ReactECharts option={option as any} style={{ height: 300, width: "100%" }} notMerge />
+}
+
+export default RealtimeLine