1 line
19 KiB
JSON
1 line
19 KiB
JSON
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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":1675826426975},{"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//\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 },\n componentName: {\n type: String\n },\n chartName: {\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: [],\n yData1: [],\n yData2: [],\n yData3: [],\n // series: []\n // triggerType:'触发时刻'\n myChart: null,\n tooltip: {\n show: true\n },\n serise: [{\n name: this.title,\n type: 'line',\n symbolSize: 6,\n smooth: true,\n itemStyle: {\n color: '#fb864b',\n borderColor: '#fb864b' // borderWidth: 2\n\n },\n data: this.yData\n }]\n };\n },\n created: function created() {// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');\n },\n methods: {\n drawLine: function drawLine() {\n var myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);\n\n if (myChart == null) {\n myChart = this.$echarts.init(this.$refs.lineChart);\n }\n\n var option = {\n title: {\n show: true,\n text: this.componentName + '-' + this.chartName + '-' + '曲线图',\n textStyle: {\n lineHeight: '30'\n }\n },\n grid: {\n left: '2%',\n right: '4%',\n bottom: '10%',\n top: '20%',\n containLabel: true\n },\n tooltip: this.tooltip,\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 axisTick: {\n show: false\n }\n }],\n series: this.series\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() {// this.drawLine()\n // console.log(this.pageType, this.title, this.status);\n // console.log(this.list1);\n },\n watch: {\n list: {\n handler: function handler(newVal) {\n var _this = this;\n\n if (newVal) {\n // x轴的数据\n this.xData = newVal.map(function (val) {\n return val.time;\n }); // 区域组件触发y轴展示\n\n if (this.title == '类型') {\n this.tooltip = {\n formatter: '{a} {b}:{c}个',\n show: true,\n confine: true\n };\n this.yData = newVal.map(function (val) {\n return val.speed;\n });\n } else if (this.title == '速度') {\n this.tooltip = {\n formatter: '{a} {b}:{c}km/h',\n show: true,\n confine: true\n };\n this.yData = newVal.map(function (val) {\n return val.speed;\n });\n } else if (this.title == '流量') {\n this.tooltip = {\n formatter: '{a} {b}:{c}辆',\n show: true,\n confine: true\n };\n this.yData = newVal.map(function (ele) {\n return ele.in_flow + ele.out_flow;\n });\n } else if (this.title == '车头时距') {\n this.tooltip = {\n formatter: '{a} {b}:{c}/s',\n show: true,\n confine: true\n };\n this.yData = newVal.map(function (val) {\n return val.ave_speed;\n });\n } else if (this.title == '排队数') {\n this.yData = newVal.map(function (val) {\n return val.n_queue;\n });\n } else if (this.title == '检测数') {\n this.yData = newVal.map(function (val) {\n return val.n_stay;\n });\n } else if (this.title == '延误') {\n this.yData = newVal.map(function (val) {});\n } else if (this.title == '拥堵') {\n this.yData = newVal.map(function (val) {});\n }\n\n if (this.$refs.lineChart) {\n this.$nextTick(function () {\n _this.drawLine();\n });\n }\n }\n },\n immediate: true\n }\n }\n};",{"version":3,"sources":["lineChart.vue"],"names":[],"mappings":"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","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 serise: [{\r\n name: this.title,\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: this.yData\r\n },\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\r\n if (newVal) {\r\n // x轴的数据\r\n this.xData = newVal.map((val) => {\r\n return val.time;\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.yData = newVal.map((val) => {\r\n return val.speed;\r\n });\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.yData = 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.yData = 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.yData = newVal.map((val) => {\r\n return val.ave_speed;\r\n\r\n });\r\n\r\n } else if (this.title == '排队数') {\r\n this.yData = newVal.map((val) => {\r\n return val.n_queue;\r\n });\r\n } else if (this.title == '检测数') {\r\n this.yData = newVal.map((val) => {\r\n return val.n_stay;\r\n });\r\n } else if (this.title == '延误') {\r\n this.yData = newVal.map((val) => {\r\n\r\n });\r\n } else if (this.title == '拥堵') {\r\n this.yData = 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 immediate: true\r\n }\r\n\r\n }\r\n};\r\n</script>\r\n<style scoped>\r\n\r\n</style>"],"sourceRoot":"src/components/chart"}]} |