From 4e5fe982ca80ab1ec7a86c23ae94a30f2f09db01 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Sun, 20 Aug 2023 17:30:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=AD=E5=8C=BA=E8=BD=A6=E8=BE=86=E6=8A=98?=
 =?UTF-8?q?=E7=8E=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../compositeIndex/components/companyCar.vue  | 145 +++++++++++++++++-
 1 file changed, 143 insertions(+), 2 deletions(-)

diff --git a/src/views/compositeIndex/components/companyCar.vue b/src/views/compositeIndex/components/companyCar.vue
index 4723b62..1cc0511 100644
--- a/src/views/compositeIndex/components/companyCar.vue
+++ b/src/views/compositeIndex/components/companyCar.vue
@@ -40,11 +40,12 @@
         </div>
       </div>
     </div>
-    <div class="car_chart"></div>
+    <div id="car_chart" class="car_chart"></div>
   </div>
 </template>
 <script>
 import { vehicleIn } from "@/api/safetyIndex";
+import * as echarts from "echarts";
 export default {
   name: "CompanyCar",
   data() {
@@ -67,6 +68,7 @@ export default {
       };
       vehicleIn(params).then((res) => {
         this.in_car_num = res.total;
+        this.init_chart();
       });
     },
     // 获取出园区车辆数
@@ -80,6 +82,146 @@ export default {
         this.out_car_num = res.total;
       });
     },
+    init_chart() {
+      let car_chart = document.getElementById("car_chart");
+      let myChart = echarts.init(car_chart);
+      const colors = ["#5470C6", "#EE6666", "#6633f0","#ECDE3D","#7df9ca"];
+      let option = {
+        color: colors,
+        tooltip: {
+          trigger: "none",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        legend: {},
+        grid: {
+          top: "20%",
+          left: "15%",
+          right: "10%",
+          bottom: "12%",
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              onZero: false,
+              lineStyle: {
+                color: colors[4],
+              },
+            },
+            axisPointer: {
+              label: {
+                formatter: function (params) {
+                  return (
+                    "Precipitation  " +
+                    params.value +
+                    (params.seriesData.length
+                      ? ":" + params.seriesData[0].data
+                      : "")
+                  );
+                },
+              },
+            },
+            // prettier-ignore
+            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
+          },
+          {
+            type: "category",
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              onZero: false,
+              lineStyle: {
+                color: colors[4],
+              },
+            },
+            axisPointer: {
+              label: {
+                formatter: function (params) {
+                  return (
+                    "Precipitation  " +
+                    params.value +
+                    (params.seriesData.length
+                      ? ":" + params.seriesData[0].data
+                      : "")
+                  );
+                },
+              },
+            },
+            // prettier-ignore
+            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12'],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              color: "#fff",
+            },
+            splitLine: {
+              //去掉坐标轴的水平虚线指示线
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            xAxisIndex: 1,
+            smooth: true,
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+          {
+            name: "",
+            type: "line",
+            xAxisIndex: 1,
+            smooth: true,
+            emphasis: {
+              focus: "series",
+            },
+            data: [2.6, 5.9, 9.0, 26, 27, 70.7, 175.6, 170, 80, 18.8, 6.0, 2.3],
+          },
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
+              0.7,
+            ],
+          },
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              3.9, 5.9, 22, 34, 48.3, 69.2, 123, 46.6, 22.9, 10, 4,
+              0.7,
+            ],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
   },
 };
 </script>
@@ -244,7 +386,6 @@ export default {
     margin-left: 1vw;
     width: 22vw;
     height: 18vh;
-    border: 0.1px solid #495e70;
   }
 }
 </style>
\ No newline at end of file