TransFlow/node_modules/.cache/vue-loader/4f7729b5e738cd62ff4050fabb28712a.json

{"remainingRequest":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\Hjm项目\\TransFlow\\src\\components\\chart\\avgChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\Hjm项目\\TransFlow\\src\\components\\chart\\avgChart.vue","mtime":1673506578703},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\Hjm项目\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\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    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\n            const data = [\r\n                {\r\n                    label: '最大值',\r\n                    value: 500\r\n                },\r\n                {\r\n                    label: '平均值',\r\n                    value: 400\r\n                },\r\n                {\r\n                    label: '最小值',\r\n                    value: 200\r\n                },\r\n                {\r\n                    label: '中间值',\r\n                    value: 200\r\n                }\r\n            ];\r\n            //数据最大值（需要结合源数据取最大值过程不在此编写，可使用lodash）\r\n            const maxData = 1000;\r\n            //横坐标数值\r\n            const xAxisData = data.map((e) => {\r\n                return e.label;\r\n            });\r\n            //图形颜色\r\n            const colorList = ['#5f55ed59', '#f8954359', '#47d69d59', '#F9F1EA'];\r\n            //图形边框颜色\r\n            const borderColorList = ['#5f55ed', '#f89543', '#47d69d', '#C1AE9E'];\r\n            //图形顶部颜色\r\n            const colorTopList = ['#5571f659', '#f1d57759', '#3fdfc159', '#F3DFCD'];\r\n            //图形顶部框颜色\r\n            const colorBorderTopList = ['#5f55ed', '#fd7d3d', '#25cd75', '#C1AE9E'];\r\n            //图形底部颜色\r\n            const colorBottomList = ['#437ffa', '#fee266', '#35c9c7', '#F3DFCD'];\r\n            //图形实体顶部颜色\r\n            const topColorList = ['#5571f6', '#f1d577', '#3fdfc1', '#F3DFCD'];\r\n            //图形柱体颜色\r\n            const barColorList = ['#7148ea', '#fd7d3d', '#25cd75', '#BFA188'];\r\n            //左右框数值\r\n            const leftAndRightData = [];\r\n            //顶部框数值\r\n            const topBorderData = [];\r\n            //底部框数值\r\n            const bottomBorderData = [];\r\n            //顶部实体数值\r\n            const topData = [];\r\n            //图形柱体数值\r\n            const barData = [];\r\n            for (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(0, 0, 0, 1, [\r\n                            {\r\n                                offset: 0,\r\n                                color: barColorList[i]\r\n                            },\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            let option = {\r\n                xAxis: [\r\n                    {\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                ],\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                    {\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            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    mounted() {\r\n        this.drawBar();\r\n    }\r\n};\r\n",{"version":3,"sources":["avgChart.vue"],"names":[],"mappings":";;;;;AAKA;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;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;;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;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;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"avgChart.vue","sourceRoot":"src/components/chart","sourcesContent":["<template>\r\n    <div id=\"barChart\" ref=\"barChart\" style=\"width: 100%; height: 300px\"></div>\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    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\n            const data = [\r\n                {\r\n                    label: '最大值',\r\n                    value: 500\r\n                },\r\n                {\r\n                    label: '平均值',\r\n                    value: 400\r\n                },\r\n                {\r\n                    label: '最小值',\r\n                    value: 200\r\n                },\r\n                {\r\n                    label: '中间值',\r\n                    value: 200\r\n                }\r\n            ];\r\n            //数据最大值（需要结合源数据取最大值过程不在此编写，可使用lodash）\r\n            const maxData = 1000;\r\n            //横坐标数值\r\n            const xAxisData = data.map((e) => {\r\n                return e.label;\r\n            });\r\n            //图形颜色\r\n            const colorList = ['#5f55ed59', '#f8954359', '#47d69d59', '#F9F1EA'];\r\n            //图形边框颜色\r\n            const borderColorList = ['#5f55ed', '#f89543', '#47d69d', '#C1AE9E'];\r\n            //图形顶部颜色\r\n            const colorTopList = ['#5571f659', '#f1d57759', '#3fdfc159', '#F3DFCD'];\r\n            //图形顶部框颜色\r\n            const colorBorderTopList = ['#5f55ed', '#fd7d3d', '#25cd75', '#C1AE9E'];\r\n            //图形底部颜色\r\n            const colorBottomList = ['#437ffa', '#fee266', '#35c9c7', '#F3DFCD'];\r\n            //图形实体顶部颜色\r\n            const topColorList = ['#5571f6', '#f1d577', '#3fdfc1', '#F3DFCD'];\r\n            //图形柱体颜色\r\n            const barColorList = ['#7148ea', '#fd7d3d', '#25cd75', '#BFA188'];\r\n            //左右框数值\r\n            const leftAndRightData = [];\r\n            //顶部框数值\r\n            const topBorderData = [];\r\n            //底部框数值\r\n            const bottomBorderData = [];\r\n            //顶部实体数值\r\n            const topData = [];\r\n            //图形柱体数值\r\n            const barData = [];\r\n            for (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(0, 0, 0, 1, [\r\n                            {\r\n                                offset: 0,\r\n                                color: barColorList[i]\r\n                            },\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            let option = {\r\n                xAxis: [\r\n                    {\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                ],\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                    {\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            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    mounted() {\r\n        this.drawBar();\r\n    }\r\n};\r\n</script>\r\n"]}]}