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

{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\barChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\barChart.vue","mtime":1675938918590},{"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":["//\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        pageType: {\r\n            type: String\r\n        },\r\n        title: {\r\n            type: String\r\n        },\r\n        status: {\r\n            type: String\r\n        },\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            xData: [],\r\n            yData: []\r\n        }\r\n    },\r\n    created() {\r\n    },\r\n    methods: {\r\n        drawBar() {\r\n     \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 option = {\r\n                color: ['#7262FD', '#FC5A5A'],\r\n                title:{\r\n                    show:true,\r\n                    text:this.componentName + '-' + this.chartName + '-' + '柱状图',\r\n                    textStyle:{\r\n                        lineHeight:'30',\r\n                    }\r\n                },\r\n                tooltip: {\r\n                    confine: true,\r\n                },\r\n                grid: {\r\n                    left: '2%',\r\n                    right: '4%',\r\n                    bottom: '10%',\r\n                    top: '20%',\r\n                    containLabel: true,\r\n                },\r\n                xAxis: {\r\n                    type: 'category',\r\n                    data: this.xData,\r\n                    axisLine: {\r\n                        lineStyle: {\r\n                            color: '#000',\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        color: '#000',\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                },\r\n                yAxis: [\r\n                    {\r\n                        type: 'value',\r\n                        min: 0,\r\n                        minInterval: 1,\r\n                        splitArea: {\r\n                            show: false,\r\n                        },\r\n\r\n                        axisLine: {\r\n                            show: true,\r\n                        },\r\n                        axisTick: {\r\n                            show: false,\r\n                        },\r\n                        splitLine: {\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed', // dotted 虚线\r\n                            },\r\n                        },\r\n                        axisLabel: {\r\n                            fontSize: 12,\r\n                            color: '#000',\r\n                            fontFamily: 'Bebas',\r\n                        },\r\n                    }],\r\n                series: [{\r\n                    type: 'bar',\r\n                    barWidth: 20,\r\n                    itemStyle: { barBorderRadius: [5, 5, 0, 0], },\r\n                    name: '时间',\r\n                    data: this.yData\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        \r\n    },\r\n    watch: {\r\n        list: {\r\n            handler(newVal) {\r\n                if (newVal) {\r\n                    this.xData = newVal[newVal.length - 1].type_data.map(ele => {\r\n                        return ele.name\r\n                    })\r\n                    this.yData = newVal[newVal.length - 1].type_data.map(ele => {\r\n                        return ele.quantity\r\n                    })\r\n                    this.drawBar()\r\n                }\r\n            }\r\n\r\n        }\r\n    }\r\n}\r\n",{"version":3,"sources":["barChart.vue"],"names":[],"mappings":";;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"barChart.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        pageType: {\r\n            type: String\r\n        },\r\n        title: {\r\n            type: String\r\n        },\r\n        status: {\r\n            type: String\r\n        },\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            xData: [],\r\n            yData: []\r\n        }\r\n    },\r\n    created() {\r\n    },\r\n    methods: {\r\n        drawBar() {\r\n     \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 option = {\r\n                color: ['#7262FD', '#FC5A5A'],\r\n                title:{\r\n                    show:true,\r\n                    text:this.componentName + '-' + this.chartName + '-' + '柱状图',\r\n                    textStyle:{\r\n                        lineHeight:'30',\r\n                    }\r\n                },\r\n                tooltip: {\r\n                    confine: true,\r\n                },\r\n                grid: {\r\n                    left: '2%',\r\n                    right: '4%',\r\n                    bottom: '10%',\r\n                    top: '20%',\r\n                    containLabel: true,\r\n                },\r\n                xAxis: {\r\n                    type: 'category',\r\n                    data: this.xData,\r\n                    axisLine: {\r\n                        lineStyle: {\r\n                            color: '#000',\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        color: '#000',\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                },\r\n                yAxis: [\r\n                    {\r\n                        type: 'value',\r\n                        min: 0,\r\n                        minInterval: 1,\r\n                        splitArea: {\r\n                            show: false,\r\n                        },\r\n\r\n                        axisLine: {\r\n                            show: true,\r\n                        },\r\n                        axisTick: {\r\n                            show: false,\r\n                        },\r\n                        splitLine: {\r\n                            lineStyle: {\r\n                                color: '#eeebeb',\r\n                                type: 'dashed', // dotted 虚线\r\n                            },\r\n                        },\r\n                        axisLabel: {\r\n                            fontSize: 12,\r\n                            color: '#000',\r\n                            fontFamily: 'Bebas',\r\n                        },\r\n                    }],\r\n                series: [{\r\n                    type: 'bar',\r\n                    barWidth: 20,\r\n                    itemStyle: { barBorderRadius: [5, 5, 0, 0], },\r\n                    name: '时间',\r\n                    data: this.yData\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        \r\n    },\r\n    watch: {\r\n        list: {\r\n            handler(newVal) {\r\n                if (newVal) {\r\n                    this.xData = newVal[newVal.length - 1].type_data.map(ele => {\r\n                        return ele.name\r\n                    })\r\n                    this.yData = newVal[newVal.length - 1].type_data.map(ele => {\r\n                        return ele.quantity\r\n                    })\r\n                    this.drawBar()\r\n                }\r\n            }\r\n\r\n        }\r\n    }\r\n}\r\n</script>"]}]}