{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\pieChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\pieChart.vue","mtime":1677026875726},{"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":["import \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.function.name\";\nimport _defineProperty from \"E:/\\u89C6\\u9891\\u8FB9\\u7F18\\u8BA1\\u7B97\\u7BA1\\u7406\\u5E73\\u53F0/TransFlow/node_modules/@babel/runtime/helpers/esm/defineProperty\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n  name: 'pieChart',\n  //饼图图组件\n  props: {\n    list: {\n      type: Array,\n      default: function _default() {\n        return [];\n      }\n    },\n    componentName: {\n      type: String\n    },\n    chartName: {\n      type: String\n    },\n    typeValue: {\n      type: Object\n    }\n  },\n  data: function data() {\n    return {\n      // 图例数据\n      legend: [],\n      // pie图数据\n      seriesData: [{\n        name: '机动车',\n        value: 0\n      }, {\n        name: '非机动车',\n        value: 0\n      }, {\n        name: '行人',\n        value: 0\n      }]\n    };\n  },\n  created: function created() {},\n  methods: {\n    drawPie: function drawPie() {\n      var _ref;\n\n      var myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);\n\n      if (myChart == null) {\n        myChart = this.$echarts.init(this.$refs.pieChart);\n      }\n\n      var color = ['#0CD2E6', '#3751E6', '#FFC722'];\n      var option = {\n        // title: {\n        //     show: true,\n        //     text: this.componentName + '-' + this.chartName + '-' + '饼状图',\n        //     textStyle: {\n        //         lineHeight: '30'\n        //     }\n        // },\n        color: color,\n        legend: {\n          top: 20,\n          right: 'center',\n          textStyle: {},\n          data: this.legend\n        },\n        tooltip: {},\n        series: [(_ref = {\n          type: 'pie',\n          center: ['50%', '55%'],\n          radius: '70%',\n          label: {\n            normal: {\n              show: false\n            }\n          },\n          labelLine: {\n            show: false,\n            length: 0,\n            length2: 0\n          }\n        }, _defineProperty(_ref, \"label\", {\n          normal: {\n            show: true,\n            position: 'inside',\n            formatter: '{value|{c}}',\n            rich: {\n              value: {\n                fontSize: 20,\n                color: '#ffffff'\n              }\n            }\n          }\n        }), _defineProperty(_ref, \"data\", this.seriesData), _ref)]\n      };\n      myChart.setOption(option); // window.onresize = () => {  // 根据窗口大小变化图表自适应\n      //     myChart.resize();\n      // };\n\n      window.addEventListener('resize', function () {\n        myChart.resize();\n      });\n    }\n  },\n  mounted: function mounted() {// if (this.typeValue) {\n    //     this.typeValue.type_data.forEach(ele => {\n    //         this.seriesData.push({\n    //             name: ele.name,\n    //             value: ele.quantity\n    //         });\n    //     });\n    //     this.drawPie();\n    // }\n  },\n  watch: {\n    // 监听单个的数据\n    typeValue: {\n      handler: function handler(newVal) {\n        var _this = this;\n\n        if (newVal) {\n          this.legend = newVal.type_data.map(function (ele) {\n            return ele.name;\n          });\n          this.seriesData = [];\n          newVal.type_data.forEach(function (ele) {\n            _this.seriesData.push({\n              name: ele.name,\n              value: ele.quantity\n            });\n          }); // this.drawPie();\n        }\n      }\n    }\n  }\n};",{"version":3,"sources":["pieChart.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n    <div style=\"width: 100%;margin-top: 5px;\">\r\n        <div class=\"tableTitle\">\r\n            <div>\r\n                <span\r\n                    style=\"width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;\"\r\n                ></span>\r\n                <span style=\"font-size:18px;\">{{this.componentName + '-' + this.chartName + '-' + '饼状图', }}</span>\r\n            </div>\r\n        </div>\r\n        <div id=\"pieChart\" ref=\"pieChart\" style=\"width:100%;height:300px;\"></div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: 'pieChart', //饼图图组件\r\n    props: {\r\n        list: {\r\n            type: Array,\r\n            default() {\r\n                return [];\r\n            }\r\n        },\r\n        componentName: {\r\n            type: String\r\n        },\r\n        chartName: {\r\n            type: String\r\n        },\r\n        typeValue: {\r\n            type: Object\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            // 图例数据\r\n            legend: [],\r\n            // pie图数据\r\n            seriesData: [\r\n                {\r\n                    name: '机动车',\r\n                    value: 0\r\n                },\r\n                {\r\n                    name: '非机动车',\r\n                    value: 0\r\n                },\r\n                {\r\n                    name: '行人',\r\n                    value: 0\r\n                }\r\n            ]\r\n        };\r\n    },\r\n    created() {},\r\n    methods: {\r\n        drawPie() {\r\n            let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);\r\n            if (myChart == null) {\r\n                myChart = this.$echarts.init(this.$refs.pieChart);\r\n            }\r\n            var color = ['#0CD2E6', '#3751E6', '#FFC722'];\r\n            let option = {\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                color: color,\r\n                legend: {\r\n                    top: 20,\r\n                    right: 'center',\r\n                    textStyle: {},\r\n                    data: this.legend\r\n                },\r\n                tooltip: {},\r\n                series: [\r\n                    {\r\n                        type: 'pie',\r\n                        center: ['50%', '55%'],\r\n                        radius: '70%',\r\n                        label: {\r\n                            normal: {\r\n                                show: false\r\n                            }\r\n                        },\r\n                        labelLine: {\r\n                            show: false,\r\n                            length: 0,\r\n                            length2: 0\r\n                        },\r\n                        label: {\r\n                            normal: {\r\n                                show: true,\r\n                                position: 'inside',\r\n                                formatter: '{value|{c}}',\r\n                                rich: {\r\n                                    value: {\r\n                                        fontSize: 20,\r\n                                        color: '#ffffff'\r\n                                    }\r\n                                }\r\n                            }\r\n                        },\r\n                        data: this.seriesData\r\n                    }\r\n                ]\r\n            };\r\n\r\n            myChart.setOption(option);\r\n\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        // if (this.typeValue) {\r\n        //     this.typeValue.type_data.forEach(ele => {\r\n        //         this.seriesData.push({\r\n        //             name: ele.name,\r\n        //             value: ele.quantity\r\n        //         });\r\n        //     });\r\n        //     this.drawPie();\r\n        // }\r\n    },\r\n    watch: {\r\n        // 监听单个的数据\r\n        typeValue: {\r\n            handler(newVal) {\r\n                if (newVal) {\r\n                    this.legend = newVal.type_data.map(ele => {\r\n                        return ele.name;\r\n                    });\r\n                    this.seriesData = [];\r\n                    newVal.type_data.forEach(ele => {\r\n                        this.seriesData.push({\r\n                            name: ele.name,\r\n                            value: ele.quantity\r\n                        });\r\n                    });\r\n                    // this.drawPie();\r\n                }\r\n            }\r\n        }\r\n    }\r\n};\r\n</script>\r\n<style scoped>\r\n.tableTitle {\r\n    background: #f7f8fa;\r\n    margin-bottom: 5px;\r\n    padding: 8px;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/components/chart"}]}