{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\lineChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\lineChart.vue","mtime":1675991031449},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n\r\nexport default {\r\n    name: 'lineChart', //折线图组件\r\n    props: {\r\n        list: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        pageType: {\r\n            type: String\r\n        },\r\n        title: {\r\n            type: String\r\n        },\r\n        status: {\r\n            type: String\r\n        },\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        }\r\n        // list1: {\r\n        //     type: Array,\r\n        //     default() {\r\n        //         return []\r\n        //     }\r\n        // }\r\n    },\r\n    data() {\r\n        return {\r\n            xData: [],\r\n            yData: [],\r\n\r\n            yData1: [],\r\n            yData2: [],\r\n            yData3: [],\r\n            // series: []\r\n            // triggerType:'触发时刻'\r\n            myChart: null,\r\n            tooltip: {\r\n                show: true\r\n            },\r\n            series: []\r\n\r\n        };\r\n    },\r\n    created() {\r\n        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\r\n\r\n\r\n\r\n    },\r\n    methods: {\r\n        drawLine() {\r\n            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart)\r\n            if (myChart == null) {\r\n                myChart = this.$echarts.init(this.$refs.lineChart)\r\n            }\r\n            let option = {\r\n                title: {\r\n                    show: true,\r\n                    text: this.componentName + '-' + this.chartName + '-' + '曲线图',\r\n                    textStyle: {\r\n                        lineHeight: '30',\r\n                    }\r\n                },\r\n                grid: {\r\n                    left: '2%',\r\n                    right: '4%',\r\n                    bottom: '10%',\r\n                    top: '20%',\r\n                    containLabel: true\r\n                },\r\n                tooltip: this.tooltip,\r\n                xAxis: [\r\n                    {\r\n                        type: 'category',\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        },\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            show: false\r\n                        },\r\n                        boundaryGap: ['5%', '5%'],\r\n\r\n                        data: this.xData\r\n                    }\r\n                ],\r\n                yAxis: [\r\n                    {\r\n                        type: 'value',\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisLine: {\r\n                            show: false\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        }\r\n                    }\r\n                ],\r\n                series: this.series\r\n            };\r\n\r\n            myChart.setOption(option);\r\n            // window.onresize = () => {  // 根据窗口大小变化图表自适应\r\n            //     myChart.resize();\r\n            // };\r\n            window.addEventListener('resize', function () {\r\n                myChart.resize();\r\n            });\r\n\r\n        }\r\n    },\r\n    mounted() {\r\n        // this.drawLine()\r\n        // console.log(this.pageType, this.title, this.status);\r\n        // console.log(this.list1);\r\n    },\r\n    watch: {\r\n        list: {\r\n            handler(newVal) {\r\n                if (newVal) {\r\n                    // x轴的数据\r\n                    this.xData = newVal.map((val) => {\r\n                        return val.time;\r\n                    });\r\n\r\n                    this.series = [{\r\n                        name: '',\r\n                        type: 'line',\r\n                        symbolSize: 6,\r\n                        smooth: true,\r\n                        itemStyle: {\r\n                            color: '#fb864b',\r\n                            borderColor: '#fb864b',\r\n                            // borderWidth: 2\r\n                        },\r\n                        data: []\r\n                    }]\r\n\r\n                    // 区域组件触发y轴展示\r\n                    if (this.title == '类型') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}个',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].name = '总量'\r\n\r\n                        // 映射出类型数组\r\n                        let arr = newVal.map(function (ele) {\r\n                            if (ele.type_data != null) {\r\n                                return ele.type_data\r\n                            }\r\n                        })\r\n                        var mapN = []\r\n                        for (var t = 0; t < arr.length; t++) {\r\n                            for (var i = 0; i < arr[t].length; i++) {\r\n                                mapN.push(arr[t][i])\r\n                            }\r\n                        }\r\n                        var lineArr = []\r\n                        // 遍历需要多少条类型折线\r\n                        if (newVal[newVal.length - 1] != undefined) {\r\n\r\n\r\n                            newVal[newVal.length - 1].type_data.forEach(ele => {\r\n                                lineArr.push({\r\n                                    name: ele.name,\r\n                                    type: 'line',\r\n                                    data: [],\r\n                                    smooth: true\r\n                                })\r\n                            })\r\n                        }\r\n\r\n\r\n                        // 筛选类型的数量\r\n                        mapN.forEach(ele => {\r\n                            if (ele.name == \"机动车\") {\r\n                                lineArr[0].data.push(ele.quantity)\r\n\r\n                            } else if (ele.name == '非机动车') {\r\n                                lineArr[1].data.push(ele.quantity)\r\n                            } else {\r\n                                lineArr[2].data.push(ele.quantity)\r\n                            }\r\n\r\n                        })\r\n                        for (let j = 0; j < lineArr.length; j++) {\r\n                            this.series.push(lineArr[j])\r\n                        }\r\n                        // 总和数量\r\n                        let mapNR1 = []\r\n                        newVal.map(function (ele) {\r\n                            if (ele.type_data != null) {\r\n                                var sum = ele.type_data.reduce(function (prev, cur) {\r\n                                    return cur.quantity + prev;\r\n                                }, 0);\r\n                                mapNR1.push(sum)\r\n                            }\r\n                        })\r\n                        // console.log(\"mapNR1\", mapNR1)\r\n                        this.series[0].data = mapNR1\r\n                    } else if (this.title == '速度') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}km/h',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.speed;\r\n                        });\r\n\r\n                    } else if (this.title == '流量') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}辆',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].data = newVal.map((ele) => {\r\n                            return ele.in_flow + ele.out_flow\r\n                        });\r\n                    } else if (this.title == '车头时距') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}/s',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.ave_speed;\r\n\r\n                        });\r\n\r\n                    } else if (this.title == '排队数') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.n_queue;\r\n                        });\r\n                    } else if (this.title == '检测数') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.n_stay;\r\n                        });\r\n                    } else if (this.title == '延误') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n\r\n                        });\r\n                    } else if (this.title == '拥堵') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n\r\n                        });\r\n                    }\r\n                    if (this.$refs.lineChart) {\r\n                        this.$nextTick(() => {\r\n                            this.drawLine();\r\n\r\n                        })\r\n                    }\r\n\r\n                }\r\n            },\r\n            immediate: true,\r\n            deep:true\r\n        }\r\n\r\n    }\r\n};\r\n",{"version":3,"sources":["lineChart.vue"],"names":[],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA","file":"lineChart.vue","sourceRoot":"src/components/chart","sourcesContent":["<template>\r\n    <div id=\"lineChart\" ref=\"lineChart\" style=\"width: 100%; height: 300px\"></div>\r\n</template>\r\n  \r\n<script>\r\nexport default {\r\n    name: 'lineChart', //折线图组件\r\n    props: {\r\n        list: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        pageType: {\r\n            type: String\r\n        },\r\n        title: {\r\n            type: String\r\n        },\r\n        status: {\r\n            type: String\r\n        },\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        }\r\n        // list1: {\r\n        //     type: Array,\r\n        //     default() {\r\n        //         return []\r\n        //     }\r\n        // }\r\n    },\r\n    data() {\r\n        return {\r\n            xData: [],\r\n            yData: [],\r\n\r\n            yData1: [],\r\n            yData2: [],\r\n            yData3: [],\r\n            // series: []\r\n            // triggerType:'触发时刻'\r\n            myChart: null,\r\n            tooltip: {\r\n                show: true\r\n            },\r\n            series: []\r\n\r\n        };\r\n    },\r\n    created() {\r\n        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\r\n\r\n\r\n\r\n    },\r\n    methods: {\r\n        drawLine() {\r\n            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart)\r\n            if (myChart == null) {\r\n                myChart = this.$echarts.init(this.$refs.lineChart)\r\n            }\r\n            let option = {\r\n                title: {\r\n                    show: true,\r\n                    text: this.componentName + '-' + this.chartName + '-' + '曲线图',\r\n                    textStyle: {\r\n                        lineHeight: '30',\r\n                    }\r\n                },\r\n                grid: {\r\n                    left: '2%',\r\n                    right: '4%',\r\n                    bottom: '10%',\r\n                    top: '20%',\r\n                    containLabel: true\r\n                },\r\n                tooltip: this.tooltip,\r\n                xAxis: [\r\n                    {\r\n                        type: 'category',\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        },\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            show: false\r\n                        },\r\n                        boundaryGap: ['5%', '5%'],\r\n\r\n                        data: this.xData\r\n                    }\r\n                ],\r\n                yAxis: [\r\n                    {\r\n                        type: 'value',\r\n                        axisLabel: {\r\n                            color: '#6c6c6c'\r\n                        },\r\n                        splitLine: {\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed'\r\n                            }\r\n                        },\r\n                        axisLine: {\r\n                            show: false\r\n                        },\r\n                        axisTick: {\r\n                            show: false\r\n                        }\r\n                    }\r\n                ],\r\n                series: this.series\r\n            };\r\n\r\n            myChart.setOption(option);\r\n            // window.onresize = () => {  // 根据窗口大小变化图表自适应\r\n            //     myChart.resize();\r\n            // };\r\n            window.addEventListener('resize', function () {\r\n                myChart.resize();\r\n            });\r\n\r\n        }\r\n    },\r\n    mounted() {\r\n        // this.drawLine()\r\n        // console.log(this.pageType, this.title, this.status);\r\n        // console.log(this.list1);\r\n    },\r\n    watch: {\r\n        list: {\r\n            handler(newVal) {\r\n                if (newVal) {\r\n                    // x轴的数据\r\n                    this.xData = newVal.map((val) => {\r\n                        return val.time;\r\n                    });\r\n\r\n                    this.series = [{\r\n                        name: '',\r\n                        type: 'line',\r\n                        symbolSize: 6,\r\n                        smooth: true,\r\n                        itemStyle: {\r\n                            color: '#fb864b',\r\n                            borderColor: '#fb864b',\r\n                            // borderWidth: 2\r\n                        },\r\n                        data: []\r\n                    }]\r\n\r\n                    // 区域组件触发y轴展示\r\n                    if (this.title == '类型') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}个',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].name = '总量'\r\n\r\n                        // 映射出类型数组\r\n                        let arr = newVal.map(function (ele) {\r\n                            if (ele.type_data != null) {\r\n                                return ele.type_data\r\n                            }\r\n                        })\r\n                        var mapN = []\r\n                        for (var t = 0; t < arr.length; t++) {\r\n                            for (var i = 0; i < arr[t].length; i++) {\r\n                                mapN.push(arr[t][i])\r\n                            }\r\n                        }\r\n                        var lineArr = []\r\n                        // 遍历需要多少条类型折线\r\n                        if (newVal[newVal.length - 1] != undefined) {\r\n\r\n\r\n                            newVal[newVal.length - 1].type_data.forEach(ele => {\r\n                                lineArr.push({\r\n                                    name: ele.name,\r\n                                    type: 'line',\r\n                                    data: [],\r\n                                    smooth: true\r\n                                })\r\n                            })\r\n                        }\r\n\r\n\r\n                        // 筛选类型的数量\r\n                        mapN.forEach(ele => {\r\n                            if (ele.name == \"机动车\") {\r\n                                lineArr[0].data.push(ele.quantity)\r\n\r\n                            } else if (ele.name == '非机动车') {\r\n                                lineArr[1].data.push(ele.quantity)\r\n                            } else {\r\n                                lineArr[2].data.push(ele.quantity)\r\n                            }\r\n\r\n                        })\r\n                        for (let j = 0; j < lineArr.length; j++) {\r\n                            this.series.push(lineArr[j])\r\n                        }\r\n                        // 总和数量\r\n                        let mapNR1 = []\r\n                        newVal.map(function (ele) {\r\n                            if (ele.type_data != null) {\r\n                                var sum = ele.type_data.reduce(function (prev, cur) {\r\n                                    return cur.quantity + prev;\r\n                                }, 0);\r\n                                mapNR1.push(sum)\r\n                            }\r\n                        })\r\n                        // console.log(\"mapNR1\", mapNR1)\r\n                        this.series[0].data = mapNR1\r\n                    } else if (this.title == '速度') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}km/h',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.speed;\r\n                        });\r\n\r\n                    } else if (this.title == '流量') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}辆',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].data = newVal.map((ele) => {\r\n                            return ele.in_flow + ele.out_flow\r\n                        });\r\n                    } else if (this.title == '车头时距') {\r\n                        this.tooltip = {\r\n                            formatter: '{a} {b}:{c}/s',\r\n                            show: true,\r\n                            confine: true\r\n                        }\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.ave_speed;\r\n\r\n                        });\r\n\r\n                    } else if (this.title == '排队数') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.n_queue;\r\n                        });\r\n                    } else if (this.title == '检测数') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n                            return val.n_stay;\r\n                        });\r\n                    } else if (this.title == '延误') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n\r\n                        });\r\n                    } else if (this.title == '拥堵') {\r\n                        this.series[0].data = newVal.map((val) => {\r\n\r\n                        });\r\n                    }\r\n                    if (this.$refs.lineChart) {\r\n                        this.$nextTick(() => {\r\n                            this.drawLine();\r\n\r\n                        })\r\n                    }\r\n\r\n                }\r\n            },\r\n            immediate: true,\r\n            deep:true\r\n        }\r\n\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n\r\n</style>"]}]}