TransFlow/node_modules/.cache/vue-loader/368b5df4ccb4a3ed1a14c540d175fef0.json

{"remainingRequest":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\components\\chart\\lineChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\components\\chart\\lineChart.vue","mtime":1673942072593},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1673232709513},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1673232720592}],"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\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            // triggerType:'触发时刻'\r\n        };\r\n    },\r\n    created() {\r\n        this.xData = this.yData = this.list.map((val) => {\r\n            return val.timestamp;\r\n        });\r\n        this.yData = this.yData = this.list.map((val) => {\r\n            return val.speed;\r\n        });\r\n        // 断面组件触发的y轴展示\r\n        if (this.pageType == '断面' && this.status == '触发') {\r\n            if (this.title == '速度组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.speed;\r\n                });\r\n            } else if (this.title == '流量组件') {\r\n                return val.speed;\r\n            } else if (this.title == '车头时距组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.headWay;\r\n                });\r\n            } else if (this.title == '类型组件') {\r\n            }\r\n        }\r\n        // 断面组件周期统计的y轴展示\r\n        if (this.pageType == '断面' && this.status == '周期统计') {\r\n            if (this.title == '速度组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.speed;\r\n                });\r\n            } else if (this.title == '流量组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.flow;\r\n                });\r\n            } else if (this.title == '车头时距组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.headWay;\r\n                });\r\n            } else if (this.title == '类型组件') {\r\n                return val.speed;\r\n            }\r\n        }\r\n\r\n        // 区域组件触发y轴展示\r\n        if (this.pageType == '区域') {\r\n            if (this.title == '类型组件') {\r\n            } else if (this.title == '速度组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.speed;\r\n                });\r\n            } else if (this.title == '流量组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_speed;\r\n                });\r\n            } else if (this.title == '车头时距组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_speed;\r\n                });\r\n            } else if (this.title == '排队数组件') {\r\n            } else if (this.title == '监测数组件') {\r\n            } else if (this.title == '延误组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_delay;\r\n                });\r\n            } else if (this.title == '拥堵组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_speed;\r\n                });\r\n            }\r\n        }\r\n        // if (this.pageType == '区域' && this.status == '周期时刻') {\r\n        //     if (this.title == '类型组件') {\r\n        //     } else if (this.title == '速度组件') {\r\n        //     } else if (this.title == '流量组件') {\r\n        //     } else if (this.title == '车头时距组件') {\r\n        //     } else if (this.title == '排队数组件') {\r\n        //     } else if (this.title == '监测数组件') {\r\n        //     } else if (this.title == '延误组件') {\r\n        //     } else if (this.title == '拥堵组件') {\r\n        //     }\r\n        // }\r\n        // if (this.pageType == '区域' && this.status == '周期统计') {\r\n        //     if (this.title == '类型组件') {\r\n        //     } else if (this.title == '速度组件') {\r\n        //     } else if (this.title == '流量组件') {\r\n        //     } else if (this.title == '车头时距组件') {\r\n        //     } else if (this.title == '排队数组件') {\r\n        //     } else if (this.title == '监测数组件') {\r\n        //     } else if (this.title == '延误组件') {\r\n        //     } else if (this.title == '拥堵组件') {\r\n        //     } else if (this.title == '拥堵组件') {\r\n        //     }\r\n        // }\r\n    },\r\n    methods: {\r\n        drawLine() {\r\n            var myChart = this.$echarts.init(this.$refs.lineChart);\r\n\r\n            let option = {\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: {\r\n                    show: true\r\n                    // trigger: 'axis',\r\n                },\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                    }\r\n                ],\r\n                series: [\r\n                    {\r\n                        name: this.title,\r\n                        type: 'line',\r\n                        stack: '总量',\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: this.yData\r\n                    }\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    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};\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;;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;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;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;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;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","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\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            // triggerType:'触发时刻'\r\n        };\r\n    },\r\n    created() {\r\n        this.xData = this.yData = this.list.map((val) => {\r\n            return val.timestamp;\r\n        });\r\n        this.yData = this.yData = this.list.map((val) => {\r\n            return val.speed;\r\n        });\r\n        // 断面组件触发的y轴展示\r\n        if (this.pageType == '断面' && this.status == '触发') {\r\n            if (this.title == '速度组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.speed;\r\n                });\r\n            } else if (this.title == '流量组件') {\r\n                return val.speed;\r\n            } else if (this.title == '车头时距组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.headWay;\r\n                });\r\n            } else if (this.title == '类型组件') {\r\n            }\r\n        }\r\n        // 断面组件周期统计的y轴展示\r\n        if (this.pageType == '断面' && this.status == '周期统计') {\r\n            if (this.title == '速度组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.speed;\r\n                });\r\n            } else if (this.title == '流量组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.flow;\r\n                });\r\n            } else if (this.title == '车头时距组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.headWay;\r\n                });\r\n            } else if (this.title == '类型组件') {\r\n                return val.speed;\r\n            }\r\n        }\r\n\r\n        // 区域组件触发y轴展示\r\n        if (this.pageType == '区域') {\r\n            if (this.title == '类型组件') {\r\n            } else if (this.title == '速度组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.speed;\r\n                });\r\n            } else if (this.title == '流量组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_speed;\r\n                });\r\n            } else if (this.title == '车头时距组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_speed;\r\n                });\r\n            } else if (this.title == '排队数组件') {\r\n            } else if (this.title == '监测数组件') {\r\n            } else if (this.title == '延误组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_delay;\r\n                });\r\n            } else if (this.title == '拥堵组件') {\r\n                this.yData = this.list.map((val) => {\r\n                    return val.ave_speed;\r\n                });\r\n            }\r\n        }\r\n        // if (this.pageType == '区域' && this.status == '周期时刻') {\r\n        //     if (this.title == '类型组件') {\r\n        //     } else if (this.title == '速度组件') {\r\n        //     } else if (this.title == '流量组件') {\r\n        //     } else if (this.title == '车头时距组件') {\r\n        //     } else if (this.title == '排队数组件') {\r\n        //     } else if (this.title == '监测数组件') {\r\n        //     } else if (this.title == '延误组件') {\r\n        //     } else if (this.title == '拥堵组件') {\r\n        //     }\r\n        // }\r\n        // if (this.pageType == '区域' && this.status == '周期统计') {\r\n        //     if (this.title == '类型组件') {\r\n        //     } else if (this.title == '速度组件') {\r\n        //     } else if (this.title == '流量组件') {\r\n        //     } else if (this.title == '车头时距组件') {\r\n        //     } else if (this.title == '排队数组件') {\r\n        //     } else if (this.title == '监测数组件') {\r\n        //     } else if (this.title == '延误组件') {\r\n        //     } else if (this.title == '拥堵组件') {\r\n        //     } else if (this.title == '拥堵组件') {\r\n        //     }\r\n        // }\r\n    },\r\n    methods: {\r\n        drawLine() {\r\n            var myChart = this.$echarts.init(this.$refs.lineChart);\r\n\r\n            let option = {\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: {\r\n                    show: true\r\n                    // trigger: 'axis',\r\n                },\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                    }\r\n                ],\r\n                series: [\r\n                    {\r\n                        name: this.title,\r\n                        type: 'line',\r\n                        stack: '总量',\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: this.yData\r\n                    }\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    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};\r\n</script>\r\n<style scoped>\r\n</style>"]}]}