1 line
15 KiB
JSON
1 line
15 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\\thermalChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\thermalChart.vue","mtime":1677491835692},{"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":["import _defineProperty from \"E:/\\u89C6\\u9891\\u8FB9\\u7F18\\u8BA1\\u7B97\\u7BA1\\u7406\\u5E73\\u53F0/TransFlow/node_modules/@babel/runtime/helpers/esm/defineProperty\";\nimport \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es7.array.includes\";\nimport \"core-js/modules/web.dom.iterable\";\n//\n//\n//\n//\nexport default {\n name: 'thermalChart',\n //热点图组件\n data: function data() {\n return {\n thermalChartData: []\n };\n },\n created: function created() {},\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 } // status: {\n // type: String\n // },\n // componentName: {\n // type: String\n // },\n\n },\n methods: {\n //处理od组件数据\n ODhanlde: function ODhanlde(odData) {\n console.log(odData); // var odData = this.odData\n\n var chartData = [];\n var start = [];\n\n for (var i = 0; i < odData.length; i++) {\n var item = odData[i].data;\n\n for (var j = 0; j < item.length; j++) {\n start.push(item[j].start); // 数组去重\n // od图的数据\n\n chartData.push([i, j, item[j].quantity]); // console.log([i,j,item[j].val]);\n }\n } // this.thermalChartData = chartData\n\n\n return chartData; // console.log(chartData, this.unique(start), 'od图的数据');\n },\n //数组去重\n unique: function unique(arr) {\n var newArr = [];\n arr.forEach(function (item) {\n return newArr.includes(item) ? '' : newArr.push(item);\n });\n return newArr;\n },\n // 绘制热力图\n drawThermalChart: function drawThermalChart(odData, startEnd) {\n var _visualMap;\n\n // console.log(chartData);\n var myChart = this.$echarts.init(this.$refs.thermalChart);\n var option = {\n dataZoom: [{\n id: \"dataZoomY\",\n type: \"slider\",\n yAxisIndex: [0],\n startValue: 0,\n endValue: 10,\n filterMode: \"empty\"\n }],\n tooltip: {\n position: \"top\" // formatter: function (params) {\n // return (\n // \"学历：\" + days[params.value[1]] + \"<br/>\" + \"人数：\" + params.data[2]\n // );\n // },\n\n },\n animation: false,\n grid: {\n left: \"3%\",\n right: \"8%\",\n bottom: \"8%\",\n containLabel: true\n },\n xAxis: {\n type: \"category\",\n data: startEnd.start.split(','),\n axisLine: {\n lineStyle: {\n color: \"#000\"\n }\n },\n axisLabel: {\n interval: 0,\n rotate: 40\n },\n splitArea: {\n show: true\n } // name: \"镇街\",\n\n },\n yAxis: {\n type: \"category\",\n data: startEnd.end.split(','),\n axisLine: {\n lineStyle: {\n color: \"#000\"\n }\n },\n axisLabel: {\n interval: 0,\n rotate: 40\n },\n splitArea: {\n show: true\n } // name: \"\",\n\n },\n visualMap: (_visualMap = {\n min: 1,\n max: 50,\n calculable: true,\n orient: \"horizontal\",\n left: \"center\",\n bottom: \"1%\",\n text: [\"50\", \"1\"]\n }, _defineProperty(_visualMap, \"calculable\", false), _defineProperty(_visualMap, \"color\", [\"#22DDDD\", \"#fec42c\", \"#80F1BE\"]), _visualMap),\n series: [{\n name: \"OD图\",\n type: \"heatmap\",\n data: this.ODhanlde(odData),\n label: {\n normal: {\n show: true\n }\n },\n itemStyle: {\n emphasis: {\n shadowBlur: 10,\n shadowColor: \"rgba(120, 0, 0, 0.5)\"\n }\n }\n }]\n };\n myChart.setOption(option);\n window.addEventListener('resize', function () {\n myChart.resize();\n }); // this.$nextTick(() => {\n // myChart.setOption(option)\n // myChart.resize();\n // })\n }\n },\n mounted: function mounted() {// if (this.list) {\n // this.drawThermalChart()\n // }\n },\n watch: {}\n};",{"version":3,"sources":["thermalChart.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n <div id=\"thermalChart\" ref=\"thermalChart\" style=\"width: 100%; height: 300px\"></div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'thermalChart', //热点图组件\r\n data() {\r\n return {\r\n thermalChartData:[]\r\n };\r\n },\r\n created() {\r\n\r\n },\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 },\r\n methods: {\r\n //处理od组件数据\r\n ODhanlde(odData) {\r\n console.log(odData);\r\n // var odData = this.odData\r\n var chartData = []\r\n var start = []\r\n for (let i = 0; i < odData.length; i++) {\r\n let item = odData[i].data\r\n for (let j = 0; j < item.length; j++) {\r\n start.push(item[j].start)\r\n // 数组去重\r\n\r\n // od图的数据\r\n chartData.push([i, j, item[j].quantity])\r\n // console.log([i,j,item[j].val]);\r\n }\r\n }\r\n // this.thermalChartData = chartData\r\n return chartData\r\n // console.log(chartData, this.unique(start), 'od图的数据');\r\n },\r\n //数组去重\r\n unique(arr) {\r\n let newArr = []\r\n arr.forEach(item => {\r\n return newArr.includes(item) ? '' : newArr.push(item)\r\n })\r\n return newArr\r\n },\r\n // 绘制热力图\r\n drawThermalChart(odData, startEnd) {\r\n \r\n // console.log(chartData);\r\n let myChart = this.$echarts.init(this.$refs.thermalChart);\r\n let option = {\r\n dataZoom: [\r\n {\r\n id: \"dataZoomY\",\r\n type: \"slider\",\r\n yAxisIndex: [0],\r\n startValue: 0,\r\n endValue: 10,\r\n filterMode: \"empty\",\r\n },\r\n ],\r\n tooltip: {\r\n position: \"top\",\r\n // formatter: function (params) {\r\n // return (\r\n // \"学历：\" + days[params.value[1]] + \"<br/>\" + \"人数：\" + params.data[2]\r\n // );\r\n // },\r\n },\r\n animation: false,\r\n grid: {\r\n left: \"3%\",\r\n right: \"8%\",\r\n bottom: \"8%\",\r\n containLabel: true,\r\n },\r\n xAxis: {\r\n type: \"category\",\r\n data: startEnd.start.split(','),\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#000\",\r\n },\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n rotate: 40,\r\n },\r\n splitArea: {\r\n show: true,\r\n },\r\n // name: \"镇街\",\r\n },\r\n yAxis: {\r\n type: \"category\",\r\n data: startEnd.end.split(','),\r\n axisLine: {\r\n lineStyle: {\r\n color: \"#000\",\r\n },\r\n },\r\n axisLabel: {\r\n interval: 0,\r\n rotate: 40,\r\n },\r\n splitArea: {\r\n show: true,\r\n },\r\n // name: \"\",\r\n },\r\n visualMap: {\r\n min: 1,\r\n max: 50,\r\n calculable: true,\r\n orient: \"horizontal\",\r\n left: \"center\",\r\n bottom: \"1%\",\r\n text: [\"50\", \"1\"], // 文本，默认为数值文本\r\n //color:['#20a0ff','#D2EDFF'],\r\n calculable: false,\r\n color: [\"#22DDDD\", \"#fec42c\", \"#80F1BE\"],\r\n },\r\n series: [\r\n {\r\n name: \"OD图\",\r\n type: \"heatmap\",\r\n data: this.ODhanlde(odData),\r\n label: {\r\n normal: {\r\n show: true,\r\n },\r\n },\r\n itemStyle: {\r\n emphasis: {\r\n shadowBlur: 10,\r\n shadowColor: \"rgba(120, 0, 0, 0.5)\",\r\n },\r\n },\r\n },\r\n ],\r\n };\r\n\r\n myChart.setOption(option);\r\n window.addEventListener('resize', function () {\r\n myChart.resize();\r\n });\r\n // this.$nextTick(() => {\r\n // myChart.setOption(option)\r\n // myChart.resize();\r\n // })\r\n }\r\n },\r\n mounted() {\r\n // if (this.list) {\r\n // this.drawThermalChart()\r\n // }\r\n\r\n\r\n },\r\n watch: {\r\n\r\n }\r\n};\r\n</script>\r\n<style scoped></style>\r\n"],"sourceRoot":"src/components/chart"}]} |