From ed3fbc8c7af456ac5eea1dece2032a128f2aac8d Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Tue, 21 Feb 2023 11:02:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chart/lineChart.vue | 144 ++++++++++++-----------------
 1 file changed, 61 insertions(+), 83 deletions(-)

diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue
index febe5ede..4e389579 100644
--- a/src/components/chart/lineChart.vue
+++ b/src/components/chart/lineChart.vue
@@ -1,7 +1,7 @@
 <template>
-<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
+    <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
 </template>
-  
+
 <script>
 export default {
     name: 'lineChart', //折线图组件
@@ -33,7 +33,7 @@ export default {
         typeValue: {
             type: Object,
             default() {
-                return {}
+                return {};
             }
         }
     },
@@ -53,27 +53,23 @@ export default {
                 show: true
             },
             series: []
-
         };
     },
     created() {
         // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
-
-
-
     },
     methods: {
         drawLine() {
-            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart)
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
             if (myChart == null) {
-                myChart = this.$echarts.init(this.$refs.lineChart)
+                myChart = this.$echarts.init(this.$refs.lineChart);
             }
             let option = {
                 title: {
                     show: true,
                     text: this.componentName + '-' + this.chartName + '-' + '曲线图',
                     textStyle: {
-                        lineHeight: '30',
+                        lineHeight: '30'
                     }
                 },
                 grid: {
@@ -135,37 +131,37 @@ export default {
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
-            window.addEventListener('resize', function () {
+            window.addEventListener('resize', function() {
                 myChart.resize();
             });
-
         }
     },
     mounted() {
-        
-
+        this.drawLine();
     },
     watch: {
         list: {
             handler(newVal) {
-                if (newVal && this.status == '触发' || this.status == '周期时刻') {
+                if ((newVal && this.status == '触发') || this.status == '周期时刻') {
                     // x轴的数据
-                    this.xData = newVal.map((val) => {
+                    this.xData = newVal.map(val => {
                         return val.time;
                     });
 
-                    this.series = [{
-                        name: '',
-                        type: 'line',
-                        symbolSize: 6,
-                        smooth: true,
-                        itemStyle: {
-                            color: '#fb864b',
-                            borderColor: '#fb864b',
-                            // borderWidth: 2
-                        },
-                        data: []
-                    }]
+                    this.series = [
+                        {
+                            name: '',
+                            type: 'line',
+                            symbolSize: 6,
+                            smooth: true,
+                            itemStyle: {
+                                color: '#fb864b',
+                                borderColor: '#fb864b'
+                                // borderWidth: 2
+                            },
+                            data: []
+                        }
+                    ];
 
                     // 区域组件触发y轴展示
                     if (this.title == '类型') {
@@ -173,130 +169,112 @@ export default {
                             formatter: '{a} {b}:{c}个',
                             show: true,
                             confine: true
-                        }
-                        this.series[0].name = '总量'
+                        };
+                        this.series[0].name = '总量';
 
                         // 映射出类型数组
-                        let arr = newVal.map(function (ele) {
+                        let arr = newVal.map(function(ele) {
                             if (ele.type_data != null) {
-                                return ele.type_data
+                                return ele.type_data;
                             }
-                        })
-                        var mapN = []
+                        });
+                        var mapN = [];
                         for (var t = 0; t < arr.length; t++) {
                             for (var i = 0; i < arr[t].length; i++) {
-                                mapN.push(arr[t][i])
+                                mapN.push(arr[t][i]);
                             }
                         }
-                        var lineArr = []
+                        var lineArr = [];
                         // 遍历需要多少条类型折线
                         if (this.typeValue) {
-
-
                             this.typeValue.type_data.forEach(ele => {
                                 lineArr.push({
                                     name: ele.name,
                                     type: 'line',
                                     data: [],
                                     smooth: true
-                                })
-                            })
+                                });
+                            });
                         }
 
-
                         // 筛选类型的数量
                         mapN.forEach(ele => {
-                            if (ele.name == "机动车") {
-                                lineArr[0].data.push(ele.quantity)
-
+                            if (ele.name == '机动车') {
+                                lineArr[0].data.push(ele.quantity);
                             } else if (ele.name == '非机动车') {
-                                lineArr[1].data.push(ele.quantity)
+                                lineArr[1].data.push(ele.quantity);
                             } else {
-                                lineArr[2].data.push(ele.quantity)
+                                lineArr[2].data.push(ele.quantity);
                             }
-
-                        })
+                        });
                         for (let j = 0; j < lineArr.length; j++) {
-                            this.series.push(lineArr[j])
+                            this.series.push(lineArr[j]);
                         }
                         // 总和数量
-                        let mapNR1 = []
-                        newVal.map(function (ele) {
+                        let mapNR1 = [];
+                        newVal.map(function(ele) {
                             if (ele.type_data != null) {
-                                var sum = ele.type_data.reduce(function (prev, cur) {
+                                var sum = ele.type_data.reduce(function(prev, cur) {
                                     return cur.quantity + prev;
                                 }, 0);
-                                mapNR1.push(sum)
+                                mapNR1.push(sum);
                             }
-                        })
+                        });
                         // console.log("mapNR1", mapNR1)
-                        this.series[0].data = mapNR1
+                        this.series[0].data = mapNR1;
                     } else if (this.title == '速度') {
                         this.tooltip = {
                             formatter: '{a} {b}:{c}km/h',
                             show: true,
                             confine: true
-                        }
-                        this.series[0].data = newVal.map((val) => {
+                        };
+                        this.series[0].data = newVal.map(val => {
                             return val.speed;
                         });
-
                     } else if (this.title == '流量') {
                         this.tooltip = {
                             formatter: '{a} {b}:{c}辆',
                             show: true,
                             confine: true
-                        }
-                        this.series[0].data = newVal.map((ele) => {
-                            return ele.in_flow + ele.out_flow
+                        };
+                        this.series[0].data = newVal.map(ele => {
+                            return ele.in_flow + ele.out_flow;
                         });
                     } else if (this.title == '车头时距') {
                         this.tooltip = {
                             formatter: '{a} {b}:{c}/s',
                             show: true,
                             confine: true
-                        }
-                        this.series[0].data = newVal.map((val) => {
+                        };
+                        this.series[0].data = newVal.map(val => {
                             return val.ave_speed;
-
                         });
-
                     } else if (this.title == '排队数') {
-                        this.series[0].data = newVal.map((val) => {
+                        this.series[0].data = newVal.map(val => {
                             return val.n_queue;
                         });
                     } else if (this.title == '检测数') {
-                        this.series[0].data = newVal.map((val) => {
+                        this.series[0].data = newVal.map(val => {
                             return val.n_stay;
                         });
                     } else if (this.title == '延误') {
-                        this.series[0].data = newVal.map((val) => {
-
-                        });
+                        this.series[0].data = newVal.map(val => {});
                     } else if (this.title == '拥堵') {
-                        this.series[0].data = newVal.map((val) => {
-
-                        });
+                        this.series[0].data = newVal.map(val => {});
                     }
                     if (this.$refs.lineChart) {
                         this.$nextTick(() => {
                             this.drawLine();
-
-                        })
+                        });
                     }
-
                 }
             },
-            immediate: true,
-
+            immediate: true
         },
         typeValue: {
-            handler(newVal) {
-                
-            }
+            handler(newVal) {}
         }
-
     }
 };
 </script>
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>