{"remainingRequest":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\视频边缘1215\\TransFlow\\src\\components\\chart\\avgChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\视频边缘1215\\TransFlow\\src\\components\\chart\\avgChart.vue","mtime":1673399845973},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\thread-loader\\dist\\cjs.js","mtime":1671074747683},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1671074740599},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1671074740928},{"path":"D:\\视频边缘1215\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1671074747916}],"contextDependencies":[],"result":["//\n//\n//\n//\n\nexport default {\n    name: 'barChart', //饼图组件\n    props: {\n        list: Array,\n        default() {\n            return [];\n        }\n    },\n    data() {\n        return {};\n    },\n    methods: {\n        drawBar() {\n            // console.log(this.$refs.barChart,'11111');\n            let myChart = this.$echarts.init(this.$refs.barChart);\n            const symbols = [\n                '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            const data = [\n                {\n                    label: '最大值',\n                    value: 500\n                },\n                {\n                    label: '平均值',\n                    value: 400\n                },\n                {\n                    label: '最小值',\n                    value: 200\n                },\n                {\n                    label: '中间值',\n                    value: 200\n                }\n            ];\n            //数据最大值（需要结合源数据取最大值过程不在此编写，可使用lodash）\n            const maxData = 1000;\n            //横坐标数值\n            const xAxisData = data.map((e) => {\n                return e.label;\n            });\n            //图形颜色\n            const colorList = ['#5f55ed59', '#f8954359', '#47d69d59', '#F9F1EA'];\n            //图形边框颜色\n            const borderColorList = ['#5f55ed', '#f89543', '#47d69d', '#C1AE9E'];\n            //图形顶部颜色\n            const colorTopList = ['#5571f659', '#f1d57759', '#3fdfc159', '#F3DFCD'];\n            //图形顶部框颜色\n            const colorBorderTopList = ['#5f55ed', '#fd7d3d', '#25cd75', '#C1AE9E'];\n            //图形底部颜色\n            const colorBottomList = ['#437ffa', '#fee266', '#35c9c7', '#F3DFCD'];\n            //图形实体顶部颜色\n            const topColorList = ['#5571f6', '#f1d577', '#3fdfc1', '#F3DFCD'];\n            //图形柱体颜色\n            const barColorList = ['#7148ea', '#fd7d3d', '#25cd75', '#BFA188'];\n            //左右框数值\n            const leftAndRightData = [];\n            //顶部框数值\n            const topBorderData = [];\n            //底部框数值\n            const bottomBorderData = [];\n            //顶部实体数值\n            const topData = [];\n            //图形柱体数值\n            const barData = [];\n            for (var i = 0; i < data.length; i++) {\n                leftAndRightData.push({\n                    name: data[i].label,\n                    value: maxData,\n\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                            {\n                                offset: 0,\n                                color: barColorList[i]\n                            },\n                            {\n                                offset: 1,\n                                color: colorBottomList[i]\n                            }\n                        ])\n                    }\n                });\n            }\n            //顶部框数值\n\n            let option = {\n                xAxis: [\n                    {\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                ],\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                    {\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                    {\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                    {\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                    // // //菱形底部实体\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                    {\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 (idx) {\n                            // 越往后的数据延迟越大\n                            return idx * 500;\n                        }\n                    },\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 (idx) {\n                            // 越往后的数据延迟越大\n                            return idx * 500;\n                        }\n                    }\n                ]\n            };\n\n            myChart.setOption(option);\n            // window.onresize = () => {  // 根据窗口大小变化图表自适应\n            //     myChart.resize();\n            // };\n            window.addEventListener('resize', function () {\n                myChart.resize();\n            });\n        }\n    },\n    mounted() {\n        this.drawBar();\n    }\n};\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>\n    <div id=\"barChart\" ref=\"barChart\" style=\"width: 100%; height: 300px\"></div>\n</template>\n\n<script>\nexport default {\n    name: 'barChart', //饼图组件\n    props: {\n        list: Array,\n        default() {\n            return [];\n        }\n    },\n    data() {\n        return {};\n    },\n    methods: {\n        drawBar() {\n            // console.log(this.$refs.barChart,'11111');\n            let myChart = this.$echarts.init(this.$refs.barChart);\n            const symbols = [\n                '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            const data = [\n                {\n                    label: '最大值',\n                    value: 500\n                },\n                {\n                    label: '平均值',\n                    value: 400\n                },\n                {\n                    label: '最小值',\n                    value: 200\n                },\n                {\n                    label: '中间值',\n                    value: 200\n                }\n            ];\n            //数据最大值（需要结合源数据取最大值过程不在此编写，可使用lodash）\n            const maxData = 1000;\n            //横坐标数值\n            const xAxisData = data.map((e) => {\n                return e.label;\n            });\n            //图形颜色\n            const colorList = ['#5f55ed59', '#f8954359', '#47d69d59', '#F9F1EA'];\n            //图形边框颜色\n            const borderColorList = ['#5f55ed', '#f89543', '#47d69d', '#C1AE9E'];\n            //图形顶部颜色\n            const colorTopList = ['#5571f659', '#f1d57759', '#3fdfc159', '#F3DFCD'];\n            //图形顶部框颜色\n            const colorBorderTopList = ['#5f55ed', '#fd7d3d', '#25cd75', '#C1AE9E'];\n            //图形底部颜色\n            const colorBottomList = ['#437ffa', '#fee266', '#35c9c7', '#F3DFCD'];\n            //图形实体顶部颜色\n            const topColorList = ['#5571f6', '#f1d577', '#3fdfc1', '#F3DFCD'];\n            //图形柱体颜色\n            const barColorList = ['#7148ea', '#fd7d3d', '#25cd75', '#BFA188'];\n            //左右框数值\n            const leftAndRightData = [];\n            //顶部框数值\n            const topBorderData = [];\n            //底部框数值\n            const bottomBorderData = [];\n            //顶部实体数值\n            const topData = [];\n            //图形柱体数值\n            const barData = [];\n            for (var i = 0; i < data.length; i++) {\n                leftAndRightData.push({\n                    name: data[i].label,\n                    value: maxData,\n\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                            {\n                                offset: 0,\n                                color: barColorList[i]\n                            },\n                            {\n                                offset: 1,\n                                color: colorBottomList[i]\n                            }\n                        ])\n                    }\n                });\n            }\n            //顶部框数值\n\n            let option = {\n                xAxis: [\n                    {\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                ],\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                    {\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                    {\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                    {\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                    // // //菱形底部实体\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                    {\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 (idx) {\n                            // 越往后的数据延迟越大\n                            return idx * 500;\n                        }\n                    },\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 (idx) {\n                            // 越往后的数据延迟越大\n                            return idx * 500;\n                        }\n                    }\n                ]\n            };\n\n            myChart.setOption(option);\n            // window.onresize = () => {  // 根据窗口大小变化图表自适应\n            //     myChart.resize();\n            // };\n            window.addEventListener('resize', function () {\n                myChart.resize();\n            });\n        }\n    },\n    mounted() {\n        this.drawBar();\n    }\n};\n</script>\n"]}]}