TransFlow/node_modules/.cache/vue-loader/b42c160d46c4f83d2d9d8b3855ee72ea.json

{"remainingRequest":"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//\n\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",{"version":3,"sources":["avgChart.vue"],"names":[],"mappings":";;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"avgChart.vue","sourceRoot":"src/components/chart","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>"]}]}