上传

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>
         </>
     )

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>
         </>
     )

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

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>
         </>
     )

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>
         </>
     )

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>
         </>
     )