中建四局(质量管理):大面积混凝土模块

src/views/projectAdmin/zjsj/quality/leftBottom.vue

@@ -1,19 +1,104 @@
 <template>
-  <Card title="大面积混泥土展示">
+  <Card title="大面积混凝土展示">
-    <div class="chart"></div>
+    <div class="checkChart" ref="checkChart"></div>
     <div class="btn">远程验收</div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card.vue";
+import echarts from "echarts4";
 export default {
-  components: { Card }
+  components: { Card },
-}
+  data() {
+    return {};
+  },
+  mounted() {
+    this.createChart();
+  },
+  methods: {
+    createChart() {
+      const checkChart = echarts.init(this.$refs.checkChart);
+      const option = {
+        legend: {
+          data: ["A区", "B区", "C区"],
+          right: "5%",
+          top: "5%",
+          textStyle: {
+            color: "#9ea3ab"
+          }
+        },
+        grid: {
+          left: "1%",
+          right: "3%",
+          bottom: "2%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: ["8-1", "8-2", "8-3", "8-4", "8-5", "8-6", "8-7", "8-8", "8-9"],
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "solid",
+              color: "#3a4354"
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#9ea3ab"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "solid",
+              color: "#3a4354"
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#9ea3ab"
+            }
+          }
+        },
+        series: [
+          {
+            name: "A区",
+            type: "line",
+            smooth: true,
+            color: "#bf552b",
+            data: [7, 10, 17, 9, 6, 13, 18, 10, 7]
+          },
+          {
+            name: "B区",
+            type: "line",
+            smooth: true,
+            color: "#66d4e0",
+            data: [15, 4, 7, 13, 15, 8, 5, 8, 13]
+          },
+          {
+            name: "C区",
+            type: "line",
+            smooth: true,
+            color: "#d5a70a",
+            data: [13, 10, 5, 11, 13, 9, 13, 5, 14]
+          }
+        ]
+      };
+      checkChart.setOption(option);
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.chart {
+.checkChart {
   width: 100%;
   height: calc(100% - 71px);
 }