左下角表格

src/assets/scss/index.scss

@@ -101,7 +101,7 @@
 
     // 底部数据
     .bototm-box {
-      margin-top: 1rem;
+      margin-top: 10px;
       display: grid;
       grid-template-columns: repeat(2, 50%);
     }

src/components/echart/bottom/bottomLeftChart.vue

@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <div id="bottomLeftChart" style="width:900px;height:400px;"></div>
+  </div>
+</template>
+
+<script>
+const echarts = require("echarts");
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    this.drawPie();
+  },
+  methods: {
+    drawPie() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChartPieLeft = echarts.init(
+        document.getElementById("bottomLeftChart")
+      );
+      //  ----------------------------------------------------------------
+      let category = [
+        "市区",
+        "万州",
+        "江北",
+        "南岸",
+        "北碚",
+        "綦南",
+        "长寿",
+        "永川",
+        "璧山",
+        "江津",
+        "城口",
+        "大足",
+        "垫江",
+        "丰都",
+        "奉节",
+        "合川",
+        "江津区",
+        "开州",
+        "南川",
+        "彭水",
+        "黔江",
+        "石柱",
+        "铜梁",
+        "潼南",
+        "巫山",
+        "巫溪",
+        "武隆",
+        "秀山",
+        "酉阳",
+        "云阳",
+        "忠县",
+        "川东",
+        "检修"
+      ];
+      let lineData = [
+        18092,
+        20728,
+        24045,
+        28348,
+        32808,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        56061,
+        62677,
+        59521,
+        67560,
+        18092,
+        20728,
+        24045,
+        28348,
+        32808,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        36097,
+        39867,
+        44715,
+        48444,
+        50415,
+        50061,
+        32677,
+        49521,
+        32808
+      ];
+      let barData = [
+        4600,
+        5000,
+        5500,
+        6500,
+        7500,
+        8500,
+        9900,
+        12500,
+        14000,
+        21500,
+        23200,
+        24450,
+        25250,
+        33300,
+        4600,
+        5000,
+        5500,
+        6500,
+        7500,
+        8500,
+        9900,
+        22500,
+        14000,
+        21500,
+        8500,
+        9900,
+        12500,
+        14000,
+        21500,
+        23200,
+        24450,
+        25250,
+        7500
+      ];
+      let rateData = [];
+      for (let i = 0; i < 33; i++) {
+        let rate = barData[i] / lineData[i];
+        rateData[i] = rate.toFixed(2);
+      }
+
+      let option = {
+        title: {
+          text: "增量设备贯通情况-单位",
+          x: "center",
+          y: 0,
+          textStyle: {
+            color: "#B4B4B4",
+            fontSize: 16,
+            fontWeight: "normal"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(255,255,255,0.1)",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+              backgroundColor: "#7B7DDC"
+            }
+          }
+        },
+        legend: {
+          data: ["已贯通", "计划贯通", "贯通率"],
+          textStyle: {
+            color: "#B4B4B4"
+          },
+          top: "7%"
+        },
+        grid: {
+          x: "12%",
+          width: "82%",
+          y: "12%"
+        },
+        xAxis: {
+          data: category,
+          axisLine: {
+            lineStyle: {
+              color: "#B4B4B4"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+
+            axisLabel: {
+              formatter: "{value} "
+            }
+          },
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisLabel: {
+              formatter: "{value} "
+            }
+          }
+        ],
+        series: [
+          {
+            name: "贯通率",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#F02FC2"
+              }
+            },
+            data: rateData
+          },
+
+          {
+            name: "已贯通",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#956FD4" },
+                  { offset: 1, color: "#3EACE5" }
+                ])
+              }
+            },
+            data: barData
+          },
+
+          {
+            name: "计划贯通",
+            type: "bar",
+            barGap: "-100%",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(156,107,211,0.5)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.3)" },
+                  { offset: 1, color: "rgba(156,107,211,0)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: lineData
+          }
+        ]
+      };
+      myChartPieLeft.setOption(option);
+      // -----------------------------------------------------------------
+      // 响应式变化
+      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/bottomLeft.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="bottomLeft">
+    <div class>
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-bar"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">构建统计图</span>
+        </div>
+      </div>
+      <div>
+        <bottomLeftChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    bottomLeftChart
+  },
+  mounted() {
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#bottomLeft {
+  padding: 1rem;
+  height: 410px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 385px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 1rem;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -83,8 +83,10 @@
 
           <!-- 第四行数据 -->
           <div class="bototm-box">
-            <div></div>
+            <dv-border-box-1>
-            <div></div>
+              <bottomLeft />
+            </dv-border-box-1>
+            <div>2</div>
           </div>
         </div>
       </div>
@@ -98,13 +100,21 @@ import centreLeft2 from "./centreLeft2";
 import centreRight1 from "./centreRight1";
 import centreRight2 from "./centreRight2";
 import center from "./center";
+import bottomLeft from "./bottomLeft";
 export default {
   data() {
     return {
       loading: false
     };
   },
-  components: { centreLeft1, centreLeft2, centreRight1, centreRight2, center },
+  components: {
+    centreLeft1,
+    centreLeft2,
+    centreRight1,
+    centreRight2,
+    center,
+    bottomLeft
+  },
   mounted() {
     this.cancelLoading();
   },