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\\avgChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\avgChart.vue","mtime":1677223419551},{"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},{"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\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n name: 'barChart',\n //均值图图组件\n props: {\n list: {\n type: Array,\n default: function _default() {\n return [];\n }\n },\n typeValue: {\n type: Object\n },\n // 组件名称\n componentName: {\n type: String\n },\n chartName: {\n type: String\n },\n status: {\n type: String\n }\n },\n data: function data() {\n return {};\n },\n methods: {\n drawBar: function drawBar(arr) {\n var _label;\n\n var myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);\n\n if (myChart == null) {\n myChart = this.$echarts.init(this.$refs.barChart);\n }\n\n var chartData = [{\n stage: '',\n number: 40\n }];\n var option = {\n tooltip: {},\n color: ['#0EECE4'],\n grid: {\n left: '0%',\n right: '0%',\n bottom: '10%',\n top: '15%',\n z: 22\n },\n xAxis: [{\n type: 'category',\n gridIndex: 0,\n data: chartData.map(function (item) {\n return item.stage;\n }),\n axisLine: {\n show: false\n },\n axisLabel: {\n show: false\n }\n }],\n yAxis: {\n type: 'value',\n splitArea: {\n show: false\n },\n gridIndex: 0,\n min: 0,\n splitNumber: 12,\n splitLine: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n show: false\n },\n max: 200\n },\n series: [{\n name: '外框',\n type: 'bar',\n barGap: '-120%',\n // 设置外框粗细\n data: [300],\n barWidth: 150,\n itemStyle: {\n normal: {\n color: 'rgba(0,0,0,.1)',\n // 填充色\n barBorderWidth: 1,\n // 边框宽度\n label: {\n // 标签显示位置\n show: false\n }\n }\n },\n z: 1\n }, {\n name: '平均值',\n type: 'bar',\n stack: 'val',\n barWidth: 150,\n xAxisIndex: 0,\n yAxisIndex: 0,\n label: {\n show: true,\n position: 'right',\n // offset: [10, 20],\n distance: 15,\n color: '#000',\n fontSize: 17,\n formatter: '{c}' + '[avg]'\n },\n itemStyle: {\n color: '#89c6ff'\n },\n data: [arr.avg],\n zlevel: 9\n }, {\n name: '中间值',\n type: 'bar',\n barWidth: 150,\n stack: 'val',\n label: {\n show: true,\n position: 'left',\n distance: 15,\n color: '#000',\n fontSize: 17,\n formatter: '{c}' + '[med]',\n rich: {}\n },\n itemStyle: {\n color: '#67b4fd'\n },\n data: [arr.med],\n zlevel: 9\n }, {\n name: '最大值',\n type: 'bar',\n stack: 'val',\n barWidth: 150,\n barGap: '-100%',\n data: [arr.max],\n label: {\n show: true,\n position: 'right',\n distance: 10,\n color: '#000',\n fontSize: 17,\n offset: [0, -30],\n formatter: '{c}' + '[max]'\n },\n itemStyle: {\n color: '#319cff'\n },\n zlevel: 9\n }, {\n name: '最小值',\n type: 'bar',\n stack: 'val',\n barWidth: 150,\n barGap: '-100%',\n data: [arr.min],\n label: (_label = {\n offset: [10, 20],\n show: true,\n position: 'left',\n distance: 10,\n color: '#000'\n }, _defineProperty(_label, \"offset\", [0, -30]), _defineProperty(_label, \"fontSize\", 17), _defineProperty(_label, \"formatter\", '{c}' + '[min]'), _label),\n // tooltip: {\n // backgroundColor: 'transparent',\n // formatter: ' '\n // },\n itemStyle: {\n color: '#328adc'\n },\n zlevel: 9\n }]\n };\n myChart.setOption(option);\n window.addEventListener('resize', function () {\n myChart.resize();\n });\n }\n },\n mounted: function mounted() {\n this.drawBar(this.typeValue);\n },\n watch: {\n typeValue: {\n handler: function handler(newVal) {\n if (newVal) {\n this.drawBar(newVal);\n }\n },\n deep: true\n }\n }\n};",{"version":3,"sources":["avgChart.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n <!-- 均值图 -->\r\n <div style=\"width: 100%;margin-top: 5px;\">\r\n <div class=\"tableTitle\">\r\n <div>\r\n <span\r\n style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"\r\n ></span>\r\n <span style=\"font-size:18px;\">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>\r\n </div>\r\n </div>\r\n <div id=\"barChart\" ref=\"barChart\" style=\"width: 100%; height: 300px\"></div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'barChart', //均值图图组件\r\n props: {\r\n list: {\r\n type: Array,\r\n default() {\r\n return [];\r\n }\r\n },\r\n typeValue: {\r\n type: Object\r\n },\r\n // 组件名称\r\n componentName: {\r\n type: String\r\n },\r\n chartName: {\r\n type: String\r\n },\r\n status: {\r\n type: String\r\n },\r\n },\r\n data() {\r\n return { };\r\n },\r\n methods: {\r\n drawBar(arr) {\r\n let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);\r\n if (myChart == null) {\r\n myChart = this.$echarts.init(this.$refs.barChart);\r\n }\r\n let chartData = [{ stage: '', number: 40 }];\r\n let option = {\r\n tooltip: {},\r\n color: ['#0EECE4'],\r\n grid: {\r\n left: '0%',\r\n right: '0%',\r\n bottom: '10%',\r\n top: '15%',\r\n z: 22\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n gridIndex: 0,\r\n data: chartData.map(item => item.stage),\r\n axisLine: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: false\r\n }\r\n }\r\n ],\r\n yAxis: {\r\n type: 'value',\r\n splitArea: { show: false },\r\n gridIndex: 0,\r\n min: 0,\r\n splitNumber: 12,\r\n splitLine: {\r\n show: false\r\n },\r\n axisLine: {\r\n show: false\r\n },\r\n axisTick: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: false\r\n },\r\n max: 200\r\n },\r\n series: [\r\n {\r\n name: '外框',\r\n type: 'bar',\r\n barGap: '-120%', // 设置外框粗细\r\n data: [300],\r\n barWidth: 150,\r\n itemStyle: {\r\n normal: {\r\n color: 'rgba(0,0,0,.1)', // 填充色\r\n barBorderWidth: 1, // 边框宽度\r\n label: {\r\n // 标签显示位置\r\n show: false\r\n }\r\n }\r\n },\r\n z: 1\r\n },\r\n {\r\n name: '平均值',\r\n type: 'bar',\r\n stack: 'val',\r\n barWidth: 150,\r\n xAxisIndex: 0,\r\n yAxisIndex: 0,\r\n label: {\r\n show: true,\r\n position: 'right',\r\n // offset: [10, 20],\r\n distance: 15,\r\n color: '#000',\r\n fontSize: 17,\r\n formatter: '{c}' + '[avg]'\r\n },\r\n itemStyle: {\r\n color: '#89c6ff'\r\n },\r\n data: [arr.avg],\r\n zlevel: 9\r\n },\r\n {\r\n name: '中间值',\r\n type: 'bar',\r\n barWidth: 150,\r\n stack: 'val',\r\n label: {\r\n show: true,\r\n position: 'left',\r\n distance: 15,\r\n color: '#000',\r\n fontSize: 17,\r\n formatter: '{c}' + '[med]',\r\n rich: {}\r\n },\r\n itemStyle: {\r\n color: '#67b4fd'\r\n },\r\n data: [arr.med],\r\n zlevel: 9\r\n },\r\n\r\n {\r\n name: '最大值',\r\n type: 'bar',\r\n stack: 'val',\r\n barWidth: 150,\r\n barGap: '-100%',\r\n data: [arr.max],\r\n label: {\r\n show: true,\r\n position: 'right',\r\n distance: 10,\r\n color: '#000',\r\n fontSize: 17,\r\n offset: [0, -30],\r\n formatter: '{c}' + '[max]'\r\n },\r\n itemStyle: {\r\n color: '#319cff'\r\n },\r\n zlevel: 9\r\n },\r\n {\r\n name: '最小值',\r\n type: 'bar',\r\n stack: 'val',\r\n barWidth: 150,\r\n barGap: '-100%',\r\n data: [arr.min],\r\n label: {\r\n offset: [10, 20],\r\n show: true,\r\n position: 'left',\r\n distance: 10,\r\n color: '#000',\r\n offset: [0, -30],\r\n fontSize: 17,\r\n formatter: '{c}' + '[min]'\r\n },\r\n // tooltip: {\r\n // backgroundColor: 'transparent',\r\n // formatter: ' '\r\n // },\r\n itemStyle: {\r\n color: '#328adc'\r\n },\r\n zlevel: 9\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 }\r\n },\r\n mounted() {\r\n this.drawBar(this.typeValue);\r\n },\r\n watch: {\r\n typeValue: {\r\n handler(newVal) {\r\n if (newVal) {\r\n this.drawBar(newVal);\r\n }\r\n },\r\n deep: true\r\n }\r\n }\r\n};\r\n</script>\r\n<style>\r\n.tableTitle {\r\n background: #f7f8fa;\r\n margin-bottom: 5px;\r\n padding: 8px;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/chart"}]} |