左下角表格

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>
-            <div></div>
+            <dv-border-box-1>
+              <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();
   },