{"ast":null,"code":"import * as echarts from 'echarts';\nexport default {\n  name: 'GraphVisval',\n  data() {\n    return {\n      type: '',\n      title: '巡逻情况态势图（上勤人数）',\n      data: null\n    };\n  },\n  computed: {},\n  mounted() {\n    this.init();\n  },\n  methods: {\n    init() {\n      const {\n        green,\n        orange,\n        red,\n        type,\n        title\n      } = this.$route.query;\n      this.type = type;\n      if (title) {\n        this.title = title;\n      }\n      if (type == 1) {\n        setTimeout(() => {\n          let myChart = echarts.init(document.getElementById('barChart'));\n          let option = {\n            xAxis: {\n              type: 'category',\n              data: ['1月', '2月', '3月', '4月', '5月', '6月']\n            },\n            yAxis: {\n              type: 'value'\n            },\n            series: [{\n              data: [150, 230, 224, 218, 135, 147],\n              type: 'line'\n            }]\n          };\n          myChart.setOption(option);\n        }, 100);\n      } else {\n        let num = Number(green || 0) + Number(orange || 0) + Number(red || 0);\n        let pieChart = echarts.init(document.getElementById('chart'));\n        const option = {\n          title: {\n            text: '',\n            subtext: '',\n            left: 'center'\n          },\n          tooltip: {\n            trigger: 'item'\n          },\n          legend: {\n            orient: 'vertical',\n            left: 'left',\n            formatter: function (name) {\n              let data = option.series[0].data;\n              let total = 0;\n              let value = 0;\n              for (let i = 0; i < data.length; i++) {\n                total += data[i].value;\n                if (data[i].name === name) {\n                  value = data[i].value;\n                }\n              }\n              // 返回使用 rich 文本样式的格式\n              return `${name}： ${value}（${(value / num).toFixed(4) * 100}%）`;\n            }\n          },\n          series: [{\n            name: '',\n            type: 'pie',\n            radius: '50%',\n            data: [{\n              value: green || 0,\n              name: '绿色',\n              itemStyle: {\n                color: '#387802'\n              }\n            }, {\n              value: orange || 0,\n              name: '橙色',\n              itemStyle: {\n                color: '#c8b003'\n              }\n            }, {\n              value: red || 0,\n              name: '红色',\n              itemStyle: {\n                color: '#ce1c1c'\n              }\n            }],\n            emphasis: {\n              itemStyle: {\n                shadowBlur: 10,\n                shadowOffsetX: 0,\n                shadowColor: 'rgba(0, 0, 0, 0.5)'\n              }\n            }\n          }]\n        };\n        pieChart.setOption(option);\n      }\n    },\n    back() {\n      window.open('about:blank', '_self').close();\n    }\n  }\n};","map":{"version":3,"names":["echarts","name","data","type","title","computed","mounted","init","methods","green","orange","red","$route","query","setTimeout","myChart","document","getElementById","option","xAxis","yAxis","series","setOption","num","Number","pieChart","text","subtext","left","tooltip","trigger","legend","orient","formatter","total","value","i","length","toFixed","radius","itemStyle","color","emphasis","shadowBlur","shadowOffsetX","shadowColor","back","window","open","close"],"sources":["src/views/graphVisual/index.vue"],"sourcesContent":["<template>\n    <div class=\"container\">\n        <el-button style=\"float: right;\" size=\"mini\" @click=\"back\">返回</el-button>\n        <div class=\"title\">{{ title }}</div>\n        <div class=\"chartWrap\">\n            <div class=\"barChartBox\" id=\"barChart\" v-if=\"type == 1\" />\n            <div class=\"chartBox\" id=\"chart\" v-else />\n        </div>\n    </div>\n</template>\n  \n<script>\nimport * as echarts from 'echarts';\n\n  export default {\n    name: 'GraphVisval',\n    data() {\n        return {\n            type: '',\n            title: '巡逻情况态势图（上勤人数）',\n            data: null,\n        };\n    },\n    computed: {},\n    mounted() {\n        this.init();\n    },\n    methods: {\n        init() {\n            const { green, orange, red, type, title } = this.$route.query;\n            this.type = type;\n            if(title){\n                this.title = title;\n            }\n            if(type==1){\n                setTimeout(() => {\n                    let myChart = echarts.init(document.getElementById('barChart'));\n                    let option = {\n                        xAxis: {\n                        type: 'category',\n                        data: ['1月', '2月', '3月', '4月', '5月', '6月']\n                        },\n                        yAxis: {\n                        type: 'value'\n                        },\n                        series: [\n                        {\n                            data: [150, 230, 224, 218, 135, 147],\n                            type: 'line'\n                        }\n                        ]\n                    };\n                    myChart.setOption(option)\n                }, 100)\n            }else{\n                let num = Number(green || 0) + Number(orange || 0) + Number(red || 0);\n                let pieChart = echarts.init(document.getElementById('chart'));\n                const option = {\n                    title: {\n                        text: '',\n                        subtext: '',\n                        left: 'center'\n                    },\n                    tooltip: {\n                        trigger: 'item'\n                    },\n                    legend: {\n                      orient: 'vertical',\n                      left: 'left',\n                      formatter: function (name) {\n                            let data = option.series[0].data;\n                            let total = 0;\n                            let value = 0;\n                            for (let i = 0; i < data.length; i++) {\n                                total += data[i].value;\n                                if (data[i].name === name) {\n                                value = data[i].value;\n                                }\n                            }\n                            // 返回使用 rich 文本样式的格式\n                            return `${name}： ${value}（${(value/num).toFixed(4)*100}%）`;\n                        },\n                    },\n                    series: [\n                        {\n                            name: '',\n                            type: 'pie',\n                            radius: '50%',\n                            data: [\n                                { value: green || 0, name: '绿色', itemStyle: { color: '#387802' } },\n                                { value: orange || 0, name: '橙色', itemStyle: { color: '#c8b003' } },\n                                { value: red || 0, name: '红色', itemStyle: { color: '#ce1c1c' } },\n                            ],\n                            emphasis: {\n                                itemStyle: {\n                                    shadowBlur: 10,\n                                    shadowOffsetX: 0,\n                                    shadowColor: 'rgba(0, 0, 0, 0.5)'\n                                }\n                            }\n                        }\n                    ]\n                };\n                pieChart.setOption(option);\n            }\n        },\n        back() {\n            window.open('about:blank','_self').close();\n        }\n    }\n  }\n</script>\n  \n<style lang=\"scss\" scoped>\n.container {\n    padding: 16px;\n    .title {\n        font-size: 18px;\n        font-weight: bold;\n        margin: 32px 0 48px;\n    }\n    .chartWrap {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    .chartBox {\n        width: 400px;\n        height: 400px;\n    }\n    .barChartBox {\n        width: 600px;\n        height: 400px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n</style>\n  "],"mappings":"AAYA,YAAAA,OAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,IAAA;MACAC,KAAA;MACAF,IAAA;IACA;EACA;EACAG,QAAA;EACAC,QAAA;IACA,KAAAC,IAAA;EACA;EACAC,OAAA;IACAD,KAAA;MACA;QAAAE,KAAA;QAAAC,MAAA;QAAAC,GAAA;QAAAR,IAAA;QAAAC;MAAA,SAAAQ,MAAA,CAAAC,KAAA;MACA,KAAAV,IAAA,GAAAA,IAAA;MACA,IAAAC,KAAA;QACA,KAAAA,KAAA,GAAAA,KAAA;MACA;MACA,IAAAD,IAAA;QACAW,UAAA;UACA,IAAAC,OAAA,GAAAf,OAAA,CAAAO,IAAA,CAAAS,QAAA,CAAAC,cAAA;UACA,IAAAC,MAAA;YACAC,KAAA;cACAhB,IAAA;cACAD,IAAA;YACA;YACAkB,KAAA;cACAjB,IAAA;YACA;YACAkB,MAAA,GACA;cACAnB,IAAA;cACAC,IAAA;YACA;UAEA;UACAY,OAAA,CAAAO,SAAA,CAAAJ,MAAA;QACA;MACA;QACA,IAAAK,GAAA,GAAAC,MAAA,CAAAf,KAAA,SAAAe,MAAA,CAAAd,MAAA,SAAAc,MAAA,CAAAb,GAAA;QACA,IAAAc,QAAA,GAAAzB,OAAA,CAAAO,IAAA,CAAAS,QAAA,CAAAC,cAAA;QACA,MAAAC,MAAA;UACAd,KAAA;YACAsB,IAAA;YACAC,OAAA;YACAC,IAAA;UACA;UACAC,OAAA;YACAC,OAAA;UACA;UACAC,MAAA;YACAC,MAAA;YACAJ,IAAA;YACAK,SAAA,WAAAA,CAAAhC,IAAA;cACA,IAAAC,IAAA,GAAAgB,MAAA,CAAAG,MAAA,IAAAnB,IAAA;cACA,IAAAgC,KAAA;cACA,IAAAC,KAAA;cACA,SAAAC,CAAA,MAAAA,CAAA,GAAAlC,IAAA,CAAAmC,MAAA,EAAAD,CAAA;gBACAF,KAAA,IAAAhC,IAAA,CAAAkC,CAAA,EAAAD,KAAA;gBACA,IAAAjC,IAAA,CAAAkC,CAAA,EAAAnC,IAAA,KAAAA,IAAA;kBACAkC,KAAA,GAAAjC,IAAA,CAAAkC,CAAA,EAAAD,KAAA;gBACA;cACA;cACA;cACA,UAAAlC,IAAA,KAAAkC,KAAA,KAAAA,KAAA,GAAAZ,GAAA,EAAAe,OAAA;YACA;UACA;UACAjB,MAAA,GACA;YACApB,IAAA;YACAE,IAAA;YACAoC,MAAA;YACArC,IAAA,GACA;cAAAiC,KAAA,EAAA1B,KAAA;cAAAR,IAAA;cAAAuC,SAAA;gBAAAC,KAAA;cAAA;YAAA,GACA;cAAAN,KAAA,EAAAzB,MAAA;cAAAT,IAAA;cAAAuC,SAAA;gBAAAC,KAAA;cAAA;YAAA,GACA;cAAAN,KAAA,EAAAxB,GAAA;cAAAV,IAAA;cAAAuC,SAAA;gBAAAC,KAAA;cAAA;YAAA,EACA;YACAC,QAAA;cACAF,SAAA;gBACAG,UAAA;gBACAC,aAAA;gBACAC,WAAA;cACA;YACA;UACA;QAEA;QACApB,QAAA,CAAAH,SAAA,CAAAJ,MAAA;MACA;IACA;IACA4B,KAAA;MACAC,MAAA,CAAAC,IAAA,yBAAAC,KAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}