From 6bbffa1134bc493270a9f53dcf3a873405406b0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= <li.jianhao@free-sun.com.cn>
Date: Fri, 22 Jul 2022 13:41:51 +0800
Subject: [PATCH] =?UTF-8?q?'=E5=A4=A7=E5=B1=8F-=E5=85=BB=E6=8A=A4-?=
 =?UTF-8?q?=E9=81=93=E8=B7=AF=E5=85=BB=E6=8A=A4=E5=91=A8=E6=9C=9F=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1UI'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../footer/conserve/left/left-top.js          | 173 +++++++++++++++++-
 1 file changed, 167 insertions(+), 6 deletions(-)

diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
index 909f6e1b..b16acf6b 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
@@ -1,14 +1,175 @@
-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={"道路养护周期统计"}>
-        
-          </Module>
-      </>
+    <>
+      <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>
+    </>
   )
 }
 export default LeftTop
\ No newline at end of file