1 line
20 KiB
JSON
1 line
20 KiB
JSON
{"remainingRequest":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\components\\chart\\avgChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\components\\chart\\avgChart.vue","mtime":1673319362963},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1673232709513},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1673232720592}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\nexport default {\n name: 'barChart',\n //饼图组件\n props: {\n list: Array,\n default: function _default() {\n return [];\n }\n },\n data: function data() {\n return {};\n },\n methods: {\n drawBar: function drawBar() {\n // console.log(this.$refs.barChart,'11111');\n var myChart = this.$echarts.init(this.$refs.barChart);\n var symbols = [\"path://M66.1,35.7L100,49.8v128.7l-33.9-12.7L66.1,35.7z\", //左边\n \"path://M133.9,35.7L100,49.8v128.7l33.9-12.7V35.7z\", //右边\n \"path://M66.1,35.7L100,21.5l33.9,14.1L100,49.8L66.1,35.7z\" //菱形\n ]; //源数据\n\n var data = [{\n label: \"最大值\",\n value: 500\n }, {\n label: \"平均值\",\n value: 400\n }, {\n label: \"最小值\",\n value: 200\n }, {\n label: \"中间值\",\n value: 200\n }]; //数据最大值(需要结合源数据取最大值过程不在此编写,可使用lodash)\n\n var maxData = 1000; //横坐标数值\n\n var xAxisData = data.map(function (e) {\n return e.label;\n }); //图形颜色\n\n var colorList = [\"#5f55ed59\", \"#f8954359\", \"#47d69d59\", \"#F9F1EA\"]; //图形边框颜色\n\n var borderColorList = [\"#5f55ed\", \"#f89543\", \"#47d69d\", \"#C1AE9E\"]; //图形顶部颜色\n\n var colorTopList = [\"#5571f659\", \"#f1d57759\", \"#3fdfc159\", \"#F3DFCD\"]; //图形顶部框颜色 \n\n var colorBorderTopList = [\"#5f55ed\", \"#fd7d3d\", \"#25cd75\", \"#C1AE9E\"]; //图形底部颜色\n\n var colorBottomList = [\"#437ffa\", \"#fee266\", \"#35c9c7\", \"#F3DFCD\"]; //图形实体顶部颜色\n\n var topColorList = [\"#5571f6\", \"#f1d577\", \"#3fdfc1\", \"#F3DFCD\"]; //图形柱体颜色\n\n var barColorList = [\"#7148ea\", \"#fd7d3d\", \"#25cd75\", \"#BFA188\"]; //左右框数值\n\n var leftAndRightData = []; //顶部框数值\n\n var topBorderData = []; //底部框数值\n\n var bottomBorderData = []; //顶部实体数值\n\n var topData = []; //图形柱体数值\n\n var barData = [];\n\n for (var i = 0; i < data.length; i++) {\n leftAndRightData.push({\n name: data[i].label,\n value: maxData,\n itemStyle: {\n color: colorList[i],\n borderColor: borderColorList[i]\n }\n });\n topBorderData.push({\n name: data[i].label,\n value: maxData,\n symbolPosition: \"end\",\n itemStyle: {\n color: colorTopList[i],\n borderColor: colorBorderTopList[i]\n }\n });\n bottomBorderData.push({\n name: data[i].label,\n value: maxData,\n itemStyle: {\n color: colorBottomList[i]\n }\n });\n topData.push({\n name: data[i].label,\n value: data[i].value,\n symbolPosition: \"end\",\n itemStyle: {\n color: topColorList[i]\n }\n });\n barData.push({\n name: data[i].label,\n value: data[i].value,\n label: {\n show: true,\n position: \"bottom\",\n distance: 60,\n color: barColorList[i],\n fontSize: 40\n },\n itemStyle: {\n color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: barColorList[i]\n }, {\n offset: 1,\n color: colorBottomList[i]\n }])\n }\n });\n } //顶部框数值\n\n\n var option = {\n xAxis: [{\n data: xAxisData,\n axisTick: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisLabel: {\n show: true,\n margin: 30,\n fontSize: 20,\n color: \"#707FB3\"\n }\n }],\n yAxis: {\n splitLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisLabel: {\n show: false\n }\n },\n grid: {\n show: false,\n height: 200,\n bottom: '19%'\n },\n series: [{\n name: \"左边\",\n type: \"pictorialBar\",\n symbolSize: [\"50%\", \"100%\"],\n symbolOffset: [-70, 20],\n barWidth: 100,\n silent: true,\n z: 12,\n symbol: symbols[0],\n data: leftAndRightData\n }, {\n name: \"右边\",\n type: \"pictorialBar\",\n symbolSize: [\"50%\", \"100%\"],\n symbolOffset: [-20, 20],\n barWidth: 100,\n silent: true,\n z: 12,\n symbol: symbols[1],\n data: leftAndRightData\n }, // //菱形顶部框\n {\n name: \"\",\n type: \"pictorialBar\",\n symbolSize: [100, 40],\n symbolOffset: [0, 0],\n silent: true,\n symbol: symbols[2],\n data: topBorderData\n }, // // //菱形底部实体\n {\n name: \"\",\n type: \"pictorialBar\",\n symbolSize: [101, 38],\n symbolOffset: [0, 20],\n silent: true,\n z: 12,\n symbol: symbols[2],\n data: bottomBorderData\n }, // // //菱形顶部实体\n {\n name: \"\",\n type: \"pictorialBar\",\n symbolSize: [99, 45],\n symbolOffset: [0, -23],\n z: 16,\n silent: true,\n symbol: symbols[2],\n data: topData,\n animationDuration: 1000,\n animationDelay: function animationDelay(idx) {\n // 越往后的数据延迟越大\n return idx * 500;\n }\n }, // // //柱形实体\n {\n type: \"bar\",\n silent: true,\n barWidth: 100,\n barGap: \"-100%\",\n z: 13,\n data: barData,\n animationDuration: 1000,\n animationDelay: function animationDelay(idx) {\n // 越往后的数据延迟越大\n return idx * 500;\n }\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.drawBar();\n }\n};",{"version":3,"sources":["avgChart.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n\r\n <div id=\"barChart\" ref=\"barChart\" style=\"width:100%;height:300px;\"></div>\r\n\r\n</template>\r\n \r\n<script>\r\nexport default {\r\n name: 'barChart', //饼图组件\r\n props:{\r\n list:Array,\r\n default(){\r\n return[]\r\n }\r\n },\r\n data() {\r\n return {\r\n \r\n }\r\n },\r\n methods: {\r\n drawBar() {\r\n // console.log(this.$refs.barChart,'11111');\r\n let myChart = this.$echarts.init(this.$refs.barChart)\r\n const symbols = [\r\n \"path://M66.1,35.7L100,49.8v128.7l-33.9-12.7L66.1,35.7z\", //左边\r\n \"path://M133.9,35.7L100,49.8v128.7l33.9-12.7V35.7z\", //右边\r\n \"path://M66.1,35.7L100,21.5l33.9,14.1L100,49.8L66.1,35.7z\", //菱形\r\n]\r\n//源数据\r\nconst data = [{\r\n label: \"最大值\",\r\n value: 500\r\n}, {\r\n label: \"平均值\",\r\n value: 400\r\n}, {\r\n label: \"最小值\",\r\n value: 200\r\n},{\r\n label: \"中间值\",\r\n value: 200\r\n}]\r\n//数据最大值(需要结合源数据取最大值过程不在此编写,可使用lodash)\r\nconst maxData = 1000;\r\n//横坐标数值\r\nconst xAxisData = data.map((e) => {\r\n return e.label\r\n})\r\n//图形颜色\r\nconst colorList = [\"#5f55ed59\", \"#f8954359\", \"#47d69d59\",\"#F9F1EA\"]\r\n//图形边框颜色\r\nconst borderColorList = [\"#5f55ed\", \"#f89543\", \"#47d69d\",\"#C1AE9E\"]\r\n//图形顶部颜色\r\nconst colorTopList = [\"#5571f659\", \"#f1d57759\", \"#3fdfc159\",\"#F3DFCD\"]\r\n//图形顶部框颜色 \r\nconst colorBorderTopList = [\"#5f55ed\", \"#fd7d3d\", \"#25cd75\",\"#C1AE9E\"]\r\n//图形底部颜色\r\nconst colorBottomList = [\"#437ffa\", \"#fee266\", \"#35c9c7\",\"#F3DFCD\"]\r\n//图形实体顶部颜色\r\nconst topColorList = [\"#5571f6\", \"#f1d577\", \"#3fdfc1\",\"#F3DFCD\"]\r\n//图形柱体颜色\r\nconst barColorList = [\"#7148ea\", \"#fd7d3d\", \"#25cd75\",\"#BFA188\"]\r\n//左右框数值\r\nconst leftAndRightData = []\r\n//顶部框数值\r\nconst topBorderData = []\r\n//底部框数值\r\nconst bottomBorderData = []\r\n//顶部实体数值\r\nconst topData = []\r\n//图形柱体数值\r\nconst barData = []\r\nfor (var i = 0; i < data.length; i++) {\r\n leftAndRightData.push({\r\n name: data[i].label,\r\n value: maxData,\r\n\r\n itemStyle: {\r\n color: colorList[i],\r\n borderColor: borderColorList[i]\r\n }\r\n })\r\n topBorderData.push({\r\n name: data[i].label,\r\n value: maxData,\r\n symbolPosition: \"end\",\r\n itemStyle: {\r\n color: colorTopList[i],\r\n borderColor: colorBorderTopList[i]\r\n }\r\n })\r\n bottomBorderData.push({\r\n name: data[i].label,\r\n value: maxData,\r\n itemStyle: {\r\n color: colorBottomList[i]\r\n }\r\n })\r\n topData.push({\r\n name: data[i].label,\r\n value: data[i].value,\r\n symbolPosition: \"end\",\r\n itemStyle: {\r\n color: topColorList[i]\r\n }\r\n })\r\n barData.push({\r\n name: data[i].label,\r\n value: data[i].value,\r\n label: {\r\n show: true,\r\n position: \"bottom\",\r\n distance: 60,\r\n color: barColorList[i],\r\n fontSize: 40\r\n },\r\n itemStyle: {\r\n color: new this.$echarts.graphic.LinearGradient(\r\n 0, 0, 0, 1,\r\n [{\r\n offset: 0,\r\n color: barColorList[i]\r\n }, {\r\n offset: 1,\r\n color: colorBottomList[i]\r\n }]\r\n )\r\n\r\n }\r\n })\r\n}\r\n//顶部框数值\r\n\r\n\r\nlet option = {\r\n xAxis: [{\r\n data: xAxisData,\r\n axisTick: {\r\n show: false\r\n },\r\n axisLine: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: true,\r\n margin: 30,\r\n fontSize: 20,\r\n color: \"#707FB3\"\r\n }\r\n }],\r\n yAxis: {\r\n splitLine: {\r\n show: false\r\n },\r\n axisTick: {\r\n show: false\r\n },\r\n axisLine: {\r\n show: false\r\n },\r\n axisLabel: {\r\n show: false\r\n }\r\n },\r\n grid: {\r\n show: false,\r\n height: 200,\r\n bottom:'19%',\r\n },\r\n series: [{\r\n name: \"左边\",\r\n type: \"pictorialBar\",\r\n symbolSize: [\"50%\", \"100%\"],\r\n symbolOffset: [-70, 20],\r\n barWidth: 100,\r\n silent: true,\r\n z: 12,\r\n symbol: symbols[0],\r\n data: leftAndRightData\r\n },\r\n {\r\n name: \"右边\",\r\n type: \"pictorialBar\",\r\n symbolSize: [\"50%\", \"100%\"],\r\n symbolOffset: [-20, 20],\r\n barWidth: 100,\r\n silent: true,\r\n z: 12,\r\n symbol: symbols[1],\r\n data: leftAndRightData\r\n },\r\n // //菱形顶部框\r\n {\r\n name: \"\",\r\n type: \"pictorialBar\",\r\n symbolSize: [100, 40],\r\n symbolOffset: [0, 0],\r\n silent: true,\r\n symbol: symbols[2],\r\n data: topBorderData\r\n },\r\n\r\n // // //菱形底部实体\r\n {\r\n name: \"\",\r\n type: \"pictorialBar\",\r\n symbolSize: [101, 38],\r\n symbolOffset: [0, 20],\r\n silent: true,\r\n z: 12,\r\n symbol: symbols[2],\r\n data: bottomBorderData\r\n },\r\n // // //菱形顶部实体\r\n {\r\n name: \"\",\r\n type:\"pictorialBar\",\r\n symbolSize: [99, 45],\r\n symbolOffset: [0, -23],\r\n z: 16,\r\n silent: true,\r\n symbol: symbols[2],\r\n data: topData,\r\n animationDuration: 1000,\r\n animationDelay: function (idx) {\r\n // 越往后的数据延迟越大\r\n return idx * 500;\r\n}\r\n },\r\n\r\n // // //柱形实体\r\n {\r\n type: \"bar\",\r\n silent: true,\r\n barWidth: 100,\r\n barGap: \"-100%\",\r\n z: 13,\r\n data: barData,\r\n animationDuration: 1000,\r\n animationDelay: function (idx) {\r\n // 越往后的数据延迟越大\r\n return idx * 500;\r\n}\r\n }\r\n\r\n\r\n ]\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.drawBar()\r\n }\r\n}\r\n</script>"],"sourceRoot":"src/components/chart"}]} |