TransFlow/node_modules/.cache/vue-loader/a45613838ec0ed2f935bfcfbbe2af948.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":1672363287203},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1672206975777},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1672206975618},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1672206975777},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1672206979279}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n\r\nexport default {\r\n    name: 'barChart', //饼图组件\r\n    data() {\r\n        return {\r\n            tableData: [\r\n                {\r\n                    name: '111',\r\n                    val1: '100',\r\n                    val2: '200',\r\n                    val3: '300',\r\n                    val4: '400'\r\n                }\r\n            ],\r\n            xData: [\r\n                '0点',\r\n                '1点',\r\n                '2点',\r\n                '3点',\r\n                '4点',\r\n                '5点',\r\n                '6点',\r\n                '7点',\r\n                '8点',\r\n                '9点',\r\n                '10点',\r\n                '11点',\r\n                '12点',\r\n                '13点',\r\n                '14点',\r\n            ],\r\n            valData: [120, 132, 101, 134, 90, 432, 421, 234, 230, 210, 182, 191, 234, 290, 330],\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            let option = {\r\n                color: ['#7262FD', '#FC5A5A'],\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                legend: {\r\n                    icon: 'rect',\r\n                    orient: 'horizontal',\r\n                    left: 'right',\r\n                    itemWidth: 12,\r\n                    itemHeight: 12,\r\n                    formatter: ['{a|{name}}'].join('\\n'),\r\n                    textStyle: {\r\n                        fontSize: 12,\r\n                        color: '#6A93B9',\r\n                        height: 8,\r\n                        rich: {\r\n                            a: {\r\n                                verticalAlign: 'bottom',\r\n                            },\r\n                        },\r\n                    },\r\n                    data: ['已完成', '未完成'],\r\n                },\r\n                xAxis: {\r\n                    type: 'category',\r\n                    data: ['04-12', '04-14', '04-15', '04-16', '04-17', '04-18'],\r\n                    axisLine: {\r\n                        lineStyle: {\r\n                            color: '#6A93B9',\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        color: '#6A93B9',\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                },\r\n                yAxis: [{\r\n                    type: 'value',\r\n                    min: 0,\r\n                    minInterval: 1,\r\n                    splitArea: {\r\n                        show: false,\r\n                    },\r\n                    axisLine: {\r\n                        show: false,\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                    splitLine: {\r\n                        lineStyle: {\r\n                            color: '#6A93B9',\r\n                            // type: 'dashed', // dotted 虚线\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        color: '#6A93B9',\r\n                        fontFamily: 'Bebas',\r\n                    },\r\n                }, {\r\n                    type: 'value',\r\n                    axisLine: {\r\n                        show: false,\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                    splitLine: {\r\n                        show: false,\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        formatter: '{value}%', // 右侧Y轴文字显示\r\n                        fontFamily: 'Bebas',\r\n                        color: '#6A93B9',\r\n                    },\r\n                    splitArea: {\r\n                        show: false,\r\n                    },\r\n                }],\r\n                series: [{\r\n                    type: 'bar',\r\n                    barWidth: 40,\r\n                    itemStyle: { barBorderRadius: [15, 15, 0, 0], },\r\n                    name: '已完成',\r\n                    data: [28, 51, 43, 43, 48, 15]\r\n                }, {\r\n                    type: 'bar',\r\n                    barWidth: 40,\r\n                    itemStyle: { barBorderRadius: [15, 15, 0, 0], },\r\n                    name: '未完成',\r\n                    data: [28, 39, 36, 36, 31, 21]\r\n                },\r\n                ],\r\n            };\r\n            myChart.setOption(option)\r\n            window.onresize = () => {  // 根据窗口大小变化图表自适应\r\n                myChart.resize();\r\n            };\r\n        },\r\n    },\r\n    mounted() {\r\n        this.drawBar()\r\n        console.log('1');\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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"barChart.vue","sourceRoot":"src/components/chart","sourcesContent":["<template>\r\n\r\n    <div id=\"barChart\" ref=\"barChart\" style=\"width:664px;height:300px;\"></div>\r\n\r\n</template>\r\n  \r\n<script>\r\nexport default {\r\n    name: 'barChart', //饼图组件\r\n    data() {\r\n        return {\r\n            tableData: [\r\n                {\r\n                    name: '111',\r\n                    val1: '100',\r\n                    val2: '200',\r\n                    val3: '300',\r\n                    val4: '400'\r\n                }\r\n            ],\r\n            xData: [\r\n                '0点',\r\n                '1点',\r\n                '2点',\r\n                '3点',\r\n                '4点',\r\n                '5点',\r\n                '6点',\r\n                '7点',\r\n                '8点',\r\n                '9点',\r\n                '10点',\r\n                '11点',\r\n                '12点',\r\n                '13点',\r\n                '14点',\r\n            ],\r\n            valData: [120, 132, 101, 134, 90, 432, 421, 234, 230, 210, 182, 191, 234, 290, 330],\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            let option = {\r\n                color: ['#7262FD', '#FC5A5A'],\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                legend: {\r\n                    icon: 'rect',\r\n                    orient: 'horizontal',\r\n                    left: 'right',\r\n                    itemWidth: 12,\r\n                    itemHeight: 12,\r\n                    formatter: ['{a|{name}}'].join('\\n'),\r\n                    textStyle: {\r\n                        fontSize: 12,\r\n                        color: '#6A93B9',\r\n                        height: 8,\r\n                        rich: {\r\n                            a: {\r\n                                verticalAlign: 'bottom',\r\n                            },\r\n                        },\r\n                    },\r\n                    data: ['已完成', '未完成'],\r\n                },\r\n                xAxis: {\r\n                    type: 'category',\r\n                    data: ['04-12', '04-14', '04-15', '04-16', '04-17', '04-18'],\r\n                    axisLine: {\r\n                        lineStyle: {\r\n                            color: '#6A93B9',\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        color: '#6A93B9',\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                },\r\n                yAxis: [{\r\n                    type: 'value',\r\n                    min: 0,\r\n                    minInterval: 1,\r\n                    splitArea: {\r\n                        show: false,\r\n                    },\r\n                    axisLine: {\r\n                        show: false,\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                    splitLine: {\r\n                        lineStyle: {\r\n                            color: '#6A93B9',\r\n                            // type: 'dashed', // dotted 虚线\r\n                        },\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        color: '#6A93B9',\r\n                        fontFamily: 'Bebas',\r\n                    },\r\n                }, {\r\n                    type: 'value',\r\n                    axisLine: {\r\n                        show: false,\r\n                    },\r\n                    axisTick: {\r\n                        show: false,\r\n                    },\r\n                    splitLine: {\r\n                        show: false,\r\n                    },\r\n                    axisLabel: {\r\n                        fontSize: 12,\r\n                        formatter: '{value}%', // 右侧Y轴文字显示\r\n                        fontFamily: 'Bebas',\r\n                        color: '#6A93B9',\r\n                    },\r\n                    splitArea: {\r\n                        show: false,\r\n                    },\r\n                }],\r\n                series: [{\r\n                    type: 'bar',\r\n                    barWidth: 40,\r\n                    itemStyle: { barBorderRadius: [15, 15, 0, 0], },\r\n                    name: '已完成',\r\n                    data: [28, 51, 43, 43, 48, 15]\r\n                }, {\r\n                    type: 'bar',\r\n                    barWidth: 40,\r\n                    itemStyle: { barBorderRadius: [15, 15, 0, 0], },\r\n                    name: '未完成',\r\n                    data: [28, 39, 36, 36, 31, 21]\r\n                },\r\n                ],\r\n            };\r\n            myChart.setOption(option)\r\n            window.onresize = () => {  // 根据窗口大小变化图表自适应\r\n                myChart.resize();\r\n            };\r\n        },\r\n    },\r\n    mounted() {\r\n        this.drawBar()\r\n        console.log('1');\r\n    }\r\n}\r\n</script>"]}]}