|
@@ -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
|