{"ast":null,"code":"import * as echarts from 'echarts';\nexport default {\n  name: 'GraphVisval',\n  data() {\n    return {\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      } = this.$route.query;\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 / (green + orange + red) * 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    back() {\n      window.open('about:blank', '_self').close();\n    }\n  }\n};","map":{"version":3,"names":["echarts","name","data","computed","mounted","init","methods","green","orange","red","$route","query","pieChart","document","getElementById","option","title","text","subtext","left","tooltip","trigger","legend","orient","formatter","series","total","value","i","length","type","radius","itemStyle","color","emphasis","shadowBlur","shadowOffsetX","shadowColor","setOption","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\">巡逻情况态势图（上勤人数）</div>\n        <div class=\"chartWrap\"><div class=\"chartBox\" id=\"chart\" /></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            data: null,\n        };\n    },\n    computed: {},\n    mounted() {\n        this.init();\n    },\n    methods: {\n        init() {\n            const { green, orange, red } = this.$route.query;\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/(green+orange+red)*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        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}\n</style>\n  "],"mappings":"AASA,YAAAA,OAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAA,IAAA;IACA;EACA;EACAC,QAAA;EACAC,QAAA;IACA,KAAAC,IAAA;EACA;EACAC,OAAA;IACAD,KAAA;MACA;QAAAE,KAAA;QAAAC,MAAA;QAAAC;MAAA,SAAAC,MAAA,CAAAC,KAAA;MACA,IAAAC,QAAA,GAAAZ,OAAA,CAAAK,IAAA,CAAAQ,QAAA,CAAAC,cAAA;MACA,MAAAC,MAAA;QACAC,KAAA;UACAC,IAAA;UACAC,OAAA;UACAC,IAAA;QACA;QACAC,OAAA;UACAC,OAAA;QACA;QACAC,MAAA;UACAC,MAAA;UACAJ,IAAA;UACAK,SAAA,WAAAA,CAAAvB,IAAA;YACA,IAAAC,IAAA,GAAAa,MAAA,CAAAU,MAAA,IAAAvB,IAAA;YACA,IAAAwB,KAAA;YACA,IAAAC,KAAA;YACA,SAAAC,CAAA,MAAAA,CAAA,GAAA1B,IAAA,CAAA2B,MAAA,EAAAD,CAAA;cACAF,KAAA,IAAAxB,IAAA,CAAA0B,CAAA,EAAAD,KAAA;cACA,IAAAzB,IAAA,CAAA0B,CAAA,EAAA3B,IAAA,KAAAA,IAAA;gBACA0B,KAAA,GAAAzB,IAAA,CAAA0B,CAAA,EAAAD,KAAA;cACA;YACA;YACA;YACA,UAAA1B,IAAA,KAAA0B,KAAA,IAAAA,KAAA,IAAApB,KAAA,GAAAC,MAAA,GAAAC,GAAA;UACA;QACA;QACAgB,MAAA,GACA;UACAxB,IAAA;UACA6B,IAAA;UACAC,MAAA;UACA7B,IAAA,GACA;YAAAyB,KAAA,EAAApB,KAAA;YAAAN,IAAA;YAAA+B,SAAA;cAAAC,KAAA;YAAA;UAAA,GACA;YAAAN,KAAA,EAAAnB,MAAA;YAAAP,IAAA;YAAA+B,SAAA;cAAAC,KAAA;YAAA;UAAA,GACA;YAAAN,KAAA,EAAAlB,GAAA;YAAAR,IAAA;YAAA+B,SAAA;cAAAC,KAAA;YAAA;UAAA,EACA;UACAC,QAAA;YACAF,SAAA;cACAG,UAAA;cACAC,aAAA;cACAC,WAAA;YACA;UACA;QACA;MAEA;MACAzB,QAAA,CAAA0B,SAAA,CAAAvB,MAAA;IACA;IACAwB,KAAA;MACAC,MAAA,CAAAC,IAAA,yBAAAC,KAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}