From e6030bcfa45414836ed4c79085b993e72029d1d5 Mon Sep 17 00:00:00 2001
From: wangyue <wang.yue@free-sun.com.cn>
Date: Wed, 20 Jul 2022 19:30:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../centerleft/center-left-bottom.js          |  2 +-
 .../leadership/centerleft/center-left-top.js  |  2 +-
 .../left/echarts/leftbottomecharts.js         | 71 +++++++++++++++++++
 .../footer/leadership/left/left-bottom.js     |  3 +-
 .../footer/leadership/left/left-center.js     |  2 +-
 .../footer/leadership/right/right-bottom.js   |  2 +-
 6 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js

diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js
index eb3d864e..b9d6d319 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-bottom.js
@@ -6,7 +6,7 @@ const Leftbottom = () => {
     return (
         <>
             <Module style={style}>
-                <div style={{ width: "40%", height: "40%", background: "red" }}></div>
+
             </Module>
         </>
     )
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js
index 9840b3a7..fada6e84 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/centerleft/center-left-top.js
@@ -7,7 +7,7 @@ const Lefttop = (props) => {
     return (
         <>
             <Module style={style}>
-                <div style={{ width: "40%", height: "40%", background: "red" }}></div>
+
             </Module>
         </>
     )
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js
new file mode 100644
index 00000000..bfec0134
--- /dev/null
+++ b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js
@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react'
+import * as echarts from 'echarts';
+
+const Leftbottomecharts = () => {
+    const chartRef = useRef(null);
+
+    useEffect(() => {
+        let chartInstance = echarts.init(chartRef.current);
+        const option = {
+
+            xAxis: {
+                type: "category",
+                data: ["街道1", "街道2", "街道3", "街道4", "街道5", "街道6", "街道7"],
+            },
+            yAxis: [
+                { type: "value" },
+                {
+                    type: "value",
+                    nameTextStyle: {
+                        color: "#ccc",
+                    },
+                    splitNumber: 5,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "dashed",
+                            width: 1,
+                            color: ["#ccc", "#ccc"],
+                        },
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            fontSize: 12,
+                        },
+                    },
+                },
+            ],
+            tooltip: {
+                trigger: "axis",
+                axisPointer: {
+                    type: "shadow",
+                },
+                textStyle: {
+                    color: "#fff",
+                    align: "left",
+                    fontSize: 14,
+                },
+                backgroundColor: "rgba(0,0,0,0.8)",
+            },
+            series: [
+                {
+                    name: "完成率",
+                    data: [50, 130, 124, 18, 35, 47, 160],
+                    yAxisIndex: 1,
+                    type: "line",
+                    smooth: true,
+                },
+            ],
+        };
+        chartInstance.setOption(option);
+    }, []);
+
+    return (
+        <>
+            <div ref={chartRef} style={{ height: "200px", width: "100%" }}></div>
+        </>
+    );
+}
+
+export default Leftbottomecharts
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js
index d31282a7..1164dab6 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/left/left-bottom.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import Module from '../../../public/module'
+import Echartes from "./echarts/leftbottomecharts"
 
 const Leftbottom = () => {
     const style = { height: "28%", marginTop: "5%" }
     return (
         <>
             <Module style={style} title={""}>
-
+                <Echartes />
             </Module>
         </>
     )
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js
index 767e2d38..9beb1113 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js
@@ -6,7 +6,7 @@ const Leftcenter = () => {
     return (
         <>
             <Module style={style}>
-                <div style={{ width: "40%", height: "40%", background: "red" }}></div>
+
             </Module>
         </>
     )
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
index d79e72e7..1b534859 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
@@ -6,7 +6,7 @@ const Rightbottom = () => {
     return (
         <>
             <Module style={style}>
-                <div style={{ width: "40%", height: "40%", background: "red" }}></div>
+
             </Module>
         </>
     )