'大屏-养护-道路养护周期统计UI'

web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

@@ -1,11 +1,172 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react';
 import Module from '../../../public/module'
+import * as echarts from 'echarts';
+
 
 const LeftTop = () => {
+  const seasonChartRef = useRef(null);
+
+  const frequentlyChartRef = useRef(null);
+
+  useEffect(() => {
+    let chartInstance = echarts.init(seasonChartRef.current);
+    const seasonOption = {
+      title: [
+        {
+          text: "季节性",
+          x: "center",
+          top: "55%",
+          textStyle: {
+            color: "#E9F7FF",
+            fontSize: 14,
+          },
+        },
+        {
+          text: "2333",
+          x: "center",
+          y: "35%",
+          textStyle: {
+            fontSize: "30",
+            color: "#FFFFFF",
+            fontFamily: "YouSheBiaoTiHei",
+          },
+        },
+      ],
+      polar: {
+        radius: ["65%", "73%"],
+        center: ["50%", "50%"],
+      },
+      angleAxis: {
+        max: 100,
+        show: false,
+      },
+      radiusAxis: {
+        type: "category",
+        show: true,
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          roundCap: true,
+          barWidth: 30,
+          showBackground: true,
+          data: [40],
+          coordinateSystem: "polar",
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: "#AAC8FF",
+                },
+                {
+                  offset: 1,
+                  color: "#0041BB",
+                },
+              ]),
+            },
+          },
+        },
+      ],
+    };
+    chartInstance.setOption(seasonOption);
+
+  }, [])
+  useEffect(() => {
+    let chartInstance = echarts.init(frequentlyChartRef.current);
+    const frequentlyOption = {
+      title: [
+        {
+          text: "经常性",
+          x: "center",
+          top: "55%",
+          textStyle: {
+            color: "#E9F7FF",
+            fontSize: 14,
+          },
+        },
+        {
+          text: "2333",
+          x: "center",
+          y: "35%",
+          textStyle: {
+            fontSize: "30",
+            color: "#FFFFFF",
+            fontFamily: "YouSheBiaoTiHei",
+          },
+        },
+      ],
+      polar: {
+        radius: ["65%", "73%"],
+        center: ["50%", "50%"],
+      },
+      angleAxis: {
+        max: 100,
+        show: false,
+      },
+      radiusAxis: {
+        type: "category",
+        show: true,
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          roundCap: true,
+          barWidth: 30,
+          showBackground: true,
+          backgroundStyle: {
+            color: "rgba(66, 66, 66, .3)",
+          },
+          data: [40],
+          coordinateSystem: "polar",
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: "#C5EFFF",
+                },
+                {
+                  offset: 1,
+                  color: "#07B9FE",
+                },
+              ]),
+            },
+          },
+        },
+      ],
+    };
+    chartInstance.setOption(frequentlyOption);
+
+  }, [])
   const style = { height: "30%", marginTop: "5%" }
   return (
     <>
       <Module style={style} title={"道路养护周期统计"}>
+        <div style={{ width: '100%', display: 'flex' }}>
+          <div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div>
+          <div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div>
+        </div>
 
       </Module>
     </>