园区车辆折现图

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>