{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\components\\chart\\lineChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\components\\chart\\lineChart.vue","mtime":1674881452554},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\thread-loader\\dist\\cjs.js","mtime":1671074747683},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1671074740599},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"contextDependencies":[],"result":["//\n//\n//\n//\n\nexport default {\n    name: 'lineChart', //折线图组件\n    props: {\n        list: {\n            type: Array,\n            default() {\n                return [];\n            }\n        },\n        pageType: {\n            type: String\n        },\n        title: {\n            type: String\n        },\n        status: {\n            type: String\n        }\n\n        // list1: {\n        //     type: Array,\n        //     default() {\n        //         return []\n        //     }\n        // }\n    },\n    data() {\n        return {\n            xData: [],\n            yData: []\n            // triggerType:'触发时刻'\n        };\n    },\n    created() {\n        this.xData = this.yData = this.list.map((val) => {\n            return val.timestamp;\n        });\n        this.yData = this.yData = this.list.map((val) => {\n            return val.speed;\n        });\n        // 断面组件触发的y轴展示\n        if (this.pageType == '断面' && this.status == '触发') {\n            if (this.title == '速度组件') {\n                this.yData = this.list.map((val) => {\n                    return val.speed;\n                });\n            } else if (this.title == '流量组件') {\n                return val.speed;\n            } else if (this.title == '车头时距组件') {\n                this.yData = this.list.map((val) => {\n                    return val.headWay;\n                });\n            } else if (this.title == '类型组件') {\n            }\n        }\n        // 断面组件周期统计的y轴展示\n        if (this.pageType == '断面' && this.status == '周期统计') {\n            if (this.title == '速度组件') {\n                this.yData = this.list.map((val) => {\n                    return val.speed;\n                });\n            } else if (this.title == '流量组件') {\n                this.yData = this.list.map((val) => {\n                    return val.flow;\n                });\n            } else if (this.title == '车头时距组件') {\n                this.yData = this.list.map((val) => {\n                    return val.headWay;\n                });\n            } else if (this.title == '类型组件') {\n                return val.speed;\n            }\n        }\n\n        // 区域组件触发y轴展示\n        if (this.pageType == '区域') {\n            if (this.title == '类型组件') {\n            } else if (this.title == '速度组件') {\n                this.yData = this.list.map((val) => {\n                    return val.speed;\n                });\n            } else if (this.title == '流量组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_speed;\n                });\n            } else if (this.title == '车头时距组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_speed;\n                });\n            } else if (this.title == '排队数组件') {\n            } else if (this.title == '监测数组件') {\n            } else if (this.title == '延误组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_delay;\n                });\n            } else if (this.title == '拥堵组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_speed;\n                });\n            }\n        }\n        // if (this.pageType == '区域' && this.status == '周期时刻') {\n        //     if (this.title == '类型组件') {\n        //     } else if (this.title == '速度组件') {\n        //     } else if (this.title == '流量组件') {\n        //     } else if (this.title == '车头时距组件') {\n        //     } else if (this.title == '排队数组件') {\n        //     } else if (this.title == '监测数组件') {\n        //     } else if (this.title == '延误组件') {\n        //     } else if (this.title == '拥堵组件') {\n        //     }\n        // }\n        // if (this.pageType == '区域' && this.status == '周期统计') {\n        //     if (this.title == '类型组件') {\n        //     } else if (this.title == '速度组件') {\n        //     } else if (this.title == '流量组件') {\n        //     } else if (this.title == '车头时距组件') {\n        //     } else if (this.title == '排队数组件') {\n        //     } else if (this.title == '监测数组件') {\n        //     } else if (this.title == '延误组件') {\n        //     } else if (this.title == '拥堵组件') {\n        //     } else if (this.title == '拥堵组件') {\n        //     }\n        // }\n    },\n    methods: {\n        drawLine() {\n            var myChart = this.$echarts.init(this.$refs.lineChart);\n\n            let option = {\n                grid: {\n                    left: '2%',\n                    right: '4%',\n                    bottom: '10%',\n                    top: '20%',\n                    containLabel: true\n                },\n                tooltip: {\n                    show: true\n                    // trigger: 'axis',\n                },\n                xAxis: [\n                    {\n                        type: 'category',\n                        axisLine: {\n                            show: true,\n                            lineStyle: {\n                                color: '#eeebeb',\n                                type: 'dashed'\n                            }\n                        },\n                        axisTick: {\n                            show: false\n                        },\n                        axisLabel: {\n                            color: '#6c6c6c'\n                        },\n                        splitLine: {\n                            show: false\n                        },\n                        boundaryGap: ['5%', '5%'],\n\n                        data: this.xData\n                    }\n                ],\n                yAxis: [\n                    {\n                        type: 'value',\n                        axisLabel: {\n                            color: '#6c6c6c'\n                        },\n                        splitLine: {\n                            lineStyle: {\n                                color: '#eeebeb',\n                                type: 'dashed'\n                            }\n                        },\n                        axisLine: {\n                            show: false\n                        }\n                    }\n                ],\n                series: [\n                    {\n                        name: this.title,\n                        type: 'line',\n                        stack: '总量',\n                        symbolSize: 6,\n                        smooth: true,\n                        itemStyle: {\n                            color: '#fb864b',\n                            borderColor: '#fb864b',\n                            borderWidth: 2\n                        },\n                        data: this.yData\n                    }\n                ]\n            };\n            myChart.setOption(option);\n            // window.onresize = () => {  // 根据窗口大小变化图表自适应\n            //     myChart.resize();\n            // };\n            window.addEventListener('resize', function () {\n                myChart.resize();\n            });\n        }\n    },\n    mounted() {\n        this.drawLine();\n        // console.log(this.pageType, this.title, this.status);\n        // console.log(this.list1);\n    }\n};\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>\n    <div id=\"lineChart\" ref=\"lineChart\" style=\"width: 100%; height: 300px\"></div>\n</template>\n  \n<script>\nexport default {\n    name: 'lineChart', //折线图组件\n    props: {\n        list: {\n            type: Array,\n            default() {\n                return [];\n            }\n        },\n        pageType: {\n            type: String\n        },\n        title: {\n            type: String\n        },\n        status: {\n            type: String\n        }\n\n        // list1: {\n        //     type: Array,\n        //     default() {\n        //         return []\n        //     }\n        // }\n    },\n    data() {\n        return {\n            xData: [],\n            yData: []\n            // triggerType:'触发时刻'\n        };\n    },\n    created() {\n        this.xData = this.yData = this.list.map((val) => {\n            return val.timestamp;\n        });\n        this.yData = this.yData = this.list.map((val) => {\n            return val.speed;\n        });\n        // 断面组件触发的y轴展示\n        if (this.pageType == '断面' && this.status == '触发') {\n            if (this.title == '速度组件') {\n                this.yData = this.list.map((val) => {\n                    return val.speed;\n                });\n            } else if (this.title == '流量组件') {\n                return val.speed;\n            } else if (this.title == '车头时距组件') {\n                this.yData = this.list.map((val) => {\n                    return val.headWay;\n                });\n            } else if (this.title == '类型组件') {\n            }\n        }\n        // 断面组件周期统计的y轴展示\n        if (this.pageType == '断面' && this.status == '周期统计') {\n            if (this.title == '速度组件') {\n                this.yData = this.list.map((val) => {\n                    return val.speed;\n                });\n            } else if (this.title == '流量组件') {\n                this.yData = this.list.map((val) => {\n                    return val.flow;\n                });\n            } else if (this.title == '车头时距组件') {\n                this.yData = this.list.map((val) => {\n                    return val.headWay;\n                });\n            } else if (this.title == '类型组件') {\n                return val.speed;\n            }\n        }\n\n        // 区域组件触发y轴展示\n        if (this.pageType == '区域') {\n            if (this.title == '类型组件') {\n            } else if (this.title == '速度组件') {\n                this.yData = this.list.map((val) => {\n                    return val.speed;\n                });\n            } else if (this.title == '流量组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_speed;\n                });\n            } else if (this.title == '车头时距组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_speed;\n                });\n            } else if (this.title == '排队数组件') {\n            } else if (this.title == '监测数组件') {\n            } else if (this.title == '延误组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_delay;\n                });\n            } else if (this.title == '拥堵组件') {\n                this.yData = this.list.map((val) => {\n                    return val.ave_speed;\n                });\n            }\n        }\n        // if (this.pageType == '区域' && this.status == '周期时刻') {\n        //     if (this.title == '类型组件') {\n        //     } else if (this.title == '速度组件') {\n        //     } else if (this.title == '流量组件') {\n        //     } else if (this.title == '车头时距组件') {\n        //     } else if (this.title == '排队数组件') {\n        //     } else if (this.title == '监测数组件') {\n        //     } else if (this.title == '延误组件') {\n        //     } else if (this.title == '拥堵组件') {\n        //     }\n        // }\n        // if (this.pageType == '区域' && this.status == '周期统计') {\n        //     if (this.title == '类型组件') {\n        //     } else if (this.title == '速度组件') {\n        //     } else if (this.title == '流量组件') {\n        //     } else if (this.title == '车头时距组件') {\n        //     } else if (this.title == '排队数组件') {\n        //     } else if (this.title == '监测数组件') {\n        //     } else if (this.title == '延误组件') {\n        //     } else if (this.title == '拥堵组件') {\n        //     } else if (this.title == '拥堵组件') {\n        //     }\n        // }\n    },\n    methods: {\n        drawLine() {\n            var myChart = this.$echarts.init(this.$refs.lineChart);\n\n            let option = {\n                grid: {\n                    left: '2%',\n                    right: '4%',\n                    bottom: '10%',\n                    top: '20%',\n                    containLabel: true\n                },\n                tooltip: {\n                    show: true\n                    // trigger: 'axis',\n                },\n                xAxis: [\n                    {\n                        type: 'category',\n                        axisLine: {\n                            show: true,\n                            lineStyle: {\n                                color: '#eeebeb',\n                                type: 'dashed'\n                            }\n                        },\n                        axisTick: {\n                            show: false\n                        },\n                        axisLabel: {\n                            color: '#6c6c6c'\n                        },\n                        splitLine: {\n                            show: false\n                        },\n                        boundaryGap: ['5%', '5%'],\n\n                        data: this.xData\n                    }\n                ],\n                yAxis: [\n                    {\n                        type: 'value',\n                        axisLabel: {\n                            color: '#6c6c6c'\n                        },\n                        splitLine: {\n                            lineStyle: {\n                                color: '#eeebeb',\n                                type: 'dashed'\n                            }\n                        },\n                        axisLine: {\n                            show: false\n                        }\n                    }\n                ],\n                series: [\n                    {\n                        name: this.title,\n                        type: 'line',\n                        stack: '总量',\n                        symbolSize: 6,\n                        smooth: true,\n                        itemStyle: {\n                            color: '#fb864b',\n                            borderColor: '#fb864b',\n                            borderWidth: 2\n                        },\n                        data: this.yData\n                    }\n                ]\n            };\n            myChart.setOption(option);\n            // window.onresize = () => {  // 根据窗口大小变化图表自适应\n            //     myChart.resize();\n            // };\n            window.addEventListener('resize', function () {\n                myChart.resize();\n            });\n        }\n    },\n    mounted() {\n        this.drawLine();\n        // console.log(this.pageType, this.title, this.status);\n        // console.log(this.list1);\n    }\n};\n</script>\n<style scoped>\n</style>"]}]}