update 能耗

src/components/Modules/EnergyCostAnalysis/NO/index.jsx

@@ -1,44 +1,176 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function NO(props) {
-	function handleSwitch(v) {
+  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
-		// console.log('switched ', v);
+  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
-	}
+  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+  const [period, setPeriod] = useState("日");
 
-	function handleDateChange(v) {
+  const currentTrend =
-		// console.log('date ', v);
+    period === "日"
-	}
+      ? dayTrend
+      : period === "周"
+      ? weekTrend
+      : period === "月"
+      ? monthTrend
+      : yearTrend;
 
-	return (
+  const options = getOptions("NOX_float", period, currentTrend);
-		<GraphBase
+
-			icon="battery"
+  function handleSwitch(v) {
-			title="一氧化氮"
+    // console.log('switched ', v);
-			desc="能耗趋势图"
+  }
-			switchOptions={true}
+
-			onSwitch={handleSwitch}
+  function handleDateChange(v) {
-			dateOptions={['日', '周', '月', '年']}
+    setPeriod(v);
-			legend={['总量', '白班', '夜班']}
+    // console.log('date ', v);
-			onDateChange={handleDateChange}
+  }
-			size={['long', 'middle']}
+
-		>
+  return (
-			{/* real echarts here */}
+    <GraphBase
-			<ReactECharts
+      icon="battery"
-				key={Math.random()}
+      title="氮氧化物"
-				option={getOptions(
+      desc="能耗趋势图"
-					[
+      switchOptions={false}
-						[148, 110, 140, 122, 84, 153, 89],
+      defaultSelect={period}
-						[88, 79, 75, 73, 33, 54, 31],
+      onSwitch={handleSwitch}
-						[60, 31, 65, 49, 51, 99, 58],
+      dateOptions={["日", "周", "月", "年"]}
-					],
+      //   legend={["总量", "白班", "夜班"]}
-					'氧气',
+      onDateChange={handleDateChange}
-				)}
+      size={["long", "middle"]}
-				style={{ height: '100%' }}
+    >
-			/>
+      {/* real echarts here */}
-			{/* real table data here  */}
+      <ReactECharts
-		</GraphBase>
+        key={Math.random()}
-	);
+        option={options}
+        // option={getOptions(
+        //   [
+        //     [148, 110, 140, 122, 84, 153, 89],
+        //     [88, 79, 75, 73, 33, 54, 31],
+        //     [60, 31, 65, 49, 51, 99, 58],
+        //   ],
+        //   "氧气"
+        // )}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }
 
 export default NO;
+
+function getOptions(source, period, trend) {
+  return {
+    color: ["#FFD160", "#12FFF5", "#2760FF"],
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    xAxis: {
+      type: "category",
+      //   data: Array(7)
+      //     .fill(1)
+      //     .map((_, index) => {
+      //       const today = new Date();
+      //       const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+      //       return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      //         dtimestamp
+      //       ).getDate()}`;
+      //     })
+      //     .reverse(),
+      data: trend[source].map((item) => item.time),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value} %",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+      //   interval: 10,
+      //   min: 0,
+      //   max: 100,
+    },
+    series: [
+      {
+        data: trend[source].map((item) => item.value),
+        type: "line",
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FFD16040" },
+            { offset: 0.5, color: "#FFD16020" },
+            { offset: 1, color: "#FFD16010" },
+          ]),
+        },
+        // smooth: true,
+      },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#12FFF540" },
+      //         { offset: 0.5, color: "#12FFF520" },
+      //         { offset: 1, color: "#12FFF510" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#2760FF40" },
+      //         { offset: 0.5, color: "#2760FF20" },
+      //         { offset: 1, color: "#2760FF10" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+    ],
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}

src/components/Modules/EnergyCostAnalysis/NO2/index.jsx

@@ -1,44 +1,176 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
-function NO2(props) {
+function Dust(props) {
-	function handleSwitch(v) {
+  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
-		// console.log('switched ', v);
+  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
-	}
+  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+  const [period, setPeriod] = useState("日");
 
-	function handleDateChange(v) {
+  const currentTrend =
-		// console.log('date ', v);
+    period === "日"
-	}
+      ? dayTrend
+      : period === "周"
+      ? weekTrend
+      : period === "月"
+      ? monthTrend
+      : yearTrend;
 
-	return (
+  const options = getOptions("dust_float", period, currentTrend);
-		<GraphBase
+
-			icon="battery"
+  function handleSwitch(v) {
-			title="二氧化氮"
+    // console.log('switched ', v);
-			desc="能耗趋势图"
+  }
-			switchOptions={true}
+
-			onSwitch={handleSwitch}
+  function handleDateChange(v) {
-			dateOptions={['日', '周', '月', '年']}
+    setPeriod(v);
-			legend={['总量', '白班', '夜班']}
+    // console.log('date ', v);
-			onDateChange={handleDateChange}
+  }
-			size={['long', 'middle']}
+
-		>
+  return (
-			{/* real echarts here */}
+    <GraphBase
-			<ReactECharts
+      icon="battery"
-				key={Math.random()}
+      title="颗粒物"
-				option={getOptions(
+      desc="能耗趋势图"
-					[
+      switchOptions={false}
-						[91, 164, 88, 120, 167, 158, 43],
+      defaultSelect={period}
-						[30, 75, 52, 43, 73, 66, 36],
+      onSwitch={handleSwitch}
-						[61, 89, 36, 77, 94, 92, 7],
+      dateOptions={["日", "周", "月", "年"]}
-					],
+      //   legend={["总量", "白班", "夜班"]}
-					'氧气',
+      onDateChange={handleDateChange}
-				)}
+      size={["long", "middle"]}
-				style={{ height: '100%' }}
+    >
-			/>
+      {/* real echarts here */}
-			{/* real table data here  */}
+      <ReactECharts
-		</GraphBase>
+        key={Math.random()}
-	);
+        option={options}
+        // option={getOptions(
+        //   [
+        //     [91, 164, 88, 120, 167, 158, 43],
+        //     [30, 75, 52, 43, 73, 66, 36],
+        //     [61, 89, 36, 77, 94, 92, 7],
+        //   ],
+        //   "氧气"
+        // )}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }
 
-export default NO2;
+export default Dust;
+
+function getOptions(source, period, trend) {
+  return {
+    color: ["#FFD160", "#12FFF5", "#2760FF"],
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    xAxis: {
+      type: "category",
+      //   data: Array(7)
+      //     .fill(1)
+      //     .map((_, index) => {
+      //       const today = new Date();
+      //       const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+      //       return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      //         dtimestamp
+      //       ).getDate()}`;
+      //     })
+      //     .reverse(),
+      data: trend[source].map((item) => item.time),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value} %",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+      //   interval: 10,
+      //   min: 0,
+      //   max: 100,
+    },
+    series: [
+      {
+        data: trend[source].map((item) => item.value),
+        type: "line",
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FFD16040" },
+            { offset: 0.5, color: "#FFD16020" },
+            { offset: 1, color: "#FFD16010" },
+          ]),
+        },
+        // smooth: true,
+      },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#12FFF540" },
+      //         { offset: 0.5, color: "#12FFF520" },
+      //         { offset: 1, color: "#12FFF510" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#2760FF40" },
+      //         { offset: 0.5, color: "#2760FF20" },
+      //         { offset: 1, color: "#2760FF10" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+    ],
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}

src/components/Modules/EnergyCostAnalysis/O/index.jsx

@@ -1,44 +1,176 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function Oxygen(props) {
-	function handleSwitch(v) {
+  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
-		// console.log('switched ', v);
+  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
-	}
+  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+  const [period, setPeriod] = useState("日");
 
-	function handleDateChange(v) {
+  const currentTrend =
-		// console.log('date ', v);
+    period === "日"
-	}
+      ? dayTrend
+      : period === "周"
+      ? weekTrend
+      : period === "月"
+      ? monthTrend
+      : yearTrend;
 
-	return (
+  const options = getOptions("O2_float", period, currentTrend);
-		<GraphBase
+
-			icon="battery"
+  function handleSwitch(v) {
-			title="氧气含量"
+    // console.log('switched ', v);
-			desc="能耗趋势图"
+  }
-			switchOptions={true}
+
-			onSwitch={handleSwitch}
+  function handleDateChange(v) {
-			dateOptions={['日', '周', '月', '年']}
+    setPeriod(v);
-			legend={['总量', '白班', '夜班']}
+    // console.log('date ', v);
-			onDateChange={handleDateChange}
+  }
-			size={['long', 'middle']}
+
-		>
+  return (
-			{/* real echarts here */}
+    <GraphBase
-			<ReactECharts
+      icon="battery"
-				key={Math.random()}
+      title="氧气含量"
-				option={getOptions(
+      desc="能耗趋势图"
-					[
+      switchOptions={false}
-						[172, 165, 135, 35, 101, 53, 68], // 总量
+      defaultSelect={period}
-						[87, 68, 81, 33, 35, 44, 38], // 白班
+      onSwitch={handleSwitch}
-						[85, 97, 54, 2, 66, 9, 30], // 夜班
+      dateOptions={["日", "周", "月", "年"]}
-					],
+      //   legend={["总量", "白班", "夜班"]}
-					'氧气',
+      onDateChange={handleDateChange}
-				)}
+      size={["long", "middle"]}
-				style={{ height: '100%' }}
+    >
-			/>
+      {/* real echarts here */}
-			{/* real table data here  */}
+      <ReactECharts
-		</GraphBase>
+        key={Math.random()}
-	);
+        option={options}
+        // option={getOptions(
+        //   [
+        //     [172, 165, 135, 35, 101, 53, 68], // 总量
+        //     [87, 68, 81, 33, 35, 44, 38], // 白班
+        //     [85, 97, 54, 2, 66, 9, 30], // 夜班
+        //   ],
+        //   "氧气"
+        // )}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }
 
 export default Oxygen;
+
+function getOptions(source, period, trend) {
+  return {
+    color: ["#FFD160", "#12FFF5", "#2760FF"],
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    xAxis: {
+      type: "category",
+      //   data: Array(7)
+      //     .fill(1)
+      //     .map((_, index) => {
+      //       const today = new Date();
+      //       const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+      //       return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      //         dtimestamp
+      //       ).getDate()}`;
+      //     })
+      //     .reverse(),
+      data: trend[source].map((item) => item.time),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value} %",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+      //   interval: 10,
+      //   min: 0,
+      //   max: 100,
+    },
+    series: [
+      {
+        data: trend[source].map((item) => item.value),
+        type: "line",
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FFD16040" },
+            { offset: 0.5, color: "#FFD16020" },
+            { offset: 1, color: "#FFD16010" },
+          ]),
+        },
+        // smooth: true,
+      },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#12FFF540" },
+      //         { offset: 0.5, color: "#12FFF520" },
+      //         { offset: 1, color: "#12FFF510" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#2760FF40" },
+      //         { offset: 0.5, color: "#2760FF20" },
+      //         { offset: 1, color: "#2760FF10" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+    ],
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}

src/components/Modules/EnergyCostAnalysis/SO2/index.jsx

@@ -1,44 +1,175 @@
-import GraphBase from '../../../Common/GraphBase';
+import GraphBase from "../../../Common/GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import getOptions from '../../../../hooks/getChartOption';
+// import getOptions from "../../../../hooks/getChartOption";
+import { useSelector } from "react-redux";
+import { useState } from "react";
+import * as echarts from "echarts";
 
 function SO2(props) {
-	function handleSwitch(v) {
+  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
-		// console.log('switched ', v);
+  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
-	}
+  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
+  const yearTrend = useSelector((state) => state.smoke?.yearTrend);
+  const [period, setPeriod] = useState("日");
 
-	function handleDateChange(v) {
+  const currentTrend =
-		// console.log('date ', v);
+    period === "日"
-	}
+      ? dayTrend
+      : period === "周"
+      ? weekTrend
+      : period === "月"
+      ? monthTrend
+      : yearTrend;
 
-	return (
+  const options = getOptions("SO2_float", period, currentTrend);
-		<GraphBase
+
-			icon="battery"
+  function handleSwitch(v) {
-			title="二氧化硫"
+    // console.log('switched ', v);
-			desc="能耗趋势图"
+  }
-			switchOptions={true}
+
-			onSwitch={handleSwitch}
+  function handleDateChange(v) {
-			dateOptions={['日', '周', '月', '年']}
+    setPeriod(v);
-			legend={['总量', '白班', '夜班']}
+    // console.log('date ', v);
-			onDateChange={handleDateChange}
+  }
-			size={['long', 'middle']}
+  return (
-		>
+    <GraphBase
-			{/* real echarts here */}
+      icon="battery"
-			<ReactECharts
+      title="二氧化硫"
-				key={Math.random()}
+      desc="能耗趋势图"
-				option={getOptions(
+      switchOptions={false}
-					[
+      defaultSelect={period}
-						[132, 155, 140, 83, 180, 67, 136],
+      onSwitch={handleSwitch}
-						[83, 58, 60, 22, 80, 64, 43],
+      dateOptions={["日", "周", "月", "年"]}
-						[49, 97, 80, 61, 100, 3, 93],
+      //   legend={["总量", "白班", "夜班"]}
-					],
+      onDateChange={handleDateChange}
-					'氧气',
+      size={["long", "middle"]}
-				)}
+    >
-				style={{ height: '100%' }}
+      {/* real echarts here */}
-			/>
+      <ReactECharts
-			{/* real table data here  */}
+        key={Math.random()}
-		</GraphBase>
+        // option={getOptions(
-	);
+        // 	[
+        // 		[132, 155, 140, 83, 180, 67, 136],
+        // 		[83, 58, 60, 22, 80, 64, 43],
+        // 		[49, 97, 80, 61, 100, 3, 93],
+        // 	],
+        // 	'氧气',
+        // )}
+        option={options}
+        style={{ height: "100%" }}
+      />
+      {/* real table data here  */}
+    </GraphBase>
+  );
 }
 
 export default SO2;
+
+function getOptions(source, period, trend) {
+  return {
+    color: ["#FFD160", "#12FFF5", "#2760FF"],
+    grid: { top: 38, right: 12, bottom: 20, left: 48 },
+    xAxis: {
+      type: "category",
+      //   data: Array(7)
+      //     .fill(1)
+      //     .map((_, index) => {
+      //       const today = new Date();
+      //       const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+      //       return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      //         dtimestamp
+      //       ).getDate()}`;
+      //     })
+      //     .reverse(),
+      data: trend[source].map((item) => item.time),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#213259",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位m³/h",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 10,
+        align: "right",
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 12,
+        formatter: "{value} %",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#213259",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#213259a0",
+        },
+      },
+      //   interval: 10,
+      //   min: 0,
+      //   max: 100,
+    },
+    series: [
+      {
+        data: trend[source].map((item) => item.value),
+        type: "line",
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FFD16040" },
+            { offset: 0.5, color: "#FFD16020" },
+            { offset: 1, color: "#FFD16010" },
+          ]),
+        },
+        // smooth: true,
+      },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#12FFF540" },
+      //         { offset: 0.5, color: "#12FFF520" },
+      //         { offset: 1, color: "#12FFF510" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+      //   {
+      //     data: Array(7)
+      //       .fill(1)
+      //       .map((_) => {
+      //         return randomInt(60, 100);
+      //       }),
+      //     type: "line",
+      //     areaStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: "#2760FF40" },
+      //         { offset: 0.5, color: "#2760FF20" },
+      //         { offset: 1, color: "#2760FF10" },
+      //       ]),
+      //     },
+      //     // smooth: true,
+      //   },
+    ],
+    tooltip: {
+      trigger: "axis",
+    },
+  };
+}