{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1673684353170},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"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//\nexport default {\n  name: 'lineChart',\n  //折线图组件\n  props: {\n    list: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    pageType: {\n      type: String\n    },\n    title: {\n      type: String\n    },\n    status: {\n      type: String\n    } // list1: {\n    //     type: Array,\n    //     default() {\n    //         return []\n    //     }\n    // }\n\n  },\n  data: function data() {\n    return {\n      xData: [],\n      yData: [] // triggerType:'触发时刻'\n\n    };\n  },\n  created: function created() {\n    this.xData = this.yData = this.list.map(function (val) {\n      return val.timestamp;\n    });\n    this.yData = this.yData = this.list.map(function (val) {\n      return val.speed;\n    }); // 断面组件触发的y轴展示\n\n    if (this.pageType == '断面' && this.status == '触发') {\n      if (this.title == '速度组件') {\n        this.yData = this.list.map(function (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(function (val) {\n          return val.headWay;\n        });\n      } else if (this.title == '类型组件') {}\n    } // 断面组件周期统计的y轴展示\n\n\n    if (this.pageType == '断面' && this.status == '周期统计') {\n      if (this.title == '速度组件') {\n        this.yData = this.list.map(function (val) {\n          return val.speed;\n        });\n      } else if (this.title == '流量组件') {\n        this.yData = this.list.map(function (val) {\n          return val.flow;\n        });\n      } else if (this.title == '车头时距组件') {\n        this.yData = this.list.map(function (val) {\n          return val.headWay;\n        });\n      } else if (this.title == '类型组件') {\n        return val.speed;\n      }\n    } // 区域组件触发y轴展示\n\n\n    if (this.pageType == '区域') {\n      if (this.title == '类型组件') {} else if (this.title == '速度组件') {\n        this.yData = this.list.map(function (val) {\n          return val.speed;\n        });\n      } else if (this.title == '流量组件') {\n        this.yData = this.list.map(function (val) {\n          return val.ave_speed;\n        });\n      } else if (this.title == '车头时距组件') {\n        this.yData = this.list.map(function (val) {\n          return val.ave_speed;\n        });\n      } else if (this.title == '排队数组件') {} else if (this.title == '监测数组件') {} else if (this.title == '延误组件') {\n        this.yData = this.list.map(function (val) {\n          return val.ave_delay;\n        });\n      } else if (this.title == '拥堵组件') {\n        this.yData = this.list.map(function (val) {\n          return val.ave_speed;\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  },\n  methods: {\n    drawLine: function drawLine() {\n      var myChart = this.$echarts.init(this.$refs.lineChart);\n      var option = {\n        grid: {\n          left: '2%',\n          right: '4%',\n          bottom: '10%',\n          top: '20%',\n          containLabel: true\n        },\n        tooltip: {\n          show: true // trigger: 'axis',\n\n        },\n        xAxis: [{\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          data: this.xData\n        }],\n        yAxis: [{\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        series: [{\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      myChart.setOption(option); // window.onresize = () => {  // 根据窗口大小变化图表自适应\n      //     myChart.resize();\n      // };\n\n      window.addEventListener('resize', function () {\n        myChart.resize();\n      });\n    }\n  },\n  mounted: function mounted() {\n    this.drawLine();\n    console.log(this.pageType, this.title, this.status); // console.log(this.list1);\n  }\n};",{"version":3,"sources":["lineChart.vue"],"names":[],"mappings":"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","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        // 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>"],"sourceRoot":"src/components/chart"}]}