<template>
  <div style="width: 100%;height: 100%;">
    <div style="width: 100%;height: 100%;" ref="myEcharts"></div>
  </div>
</template>

<script>
import { selectFocusGroupList } from '@/api/statis.js'
export default {
  components: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      selectFocusGroupList().then(res => {
        if (res.data.errcode === 0) {
          let data = res.data.data.map(item => {
            return {
              value: item.num,
              name: item.name
            }
          })
          this.myChart = this.$echarts.init(this.$refs.myEcharts)
          this.myChart.setOption({
            title: {
              show: false
            },
            color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            tooltip: {
              show: false
            },
            legend: {
              show: false
            },
            series: [
              {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 26,
                    fontWeight: 'bold',
                    formatter: '{b}\r\n{c}件，{d}%'
                  }
                },
                data: data,
                label: {
                  show: true
                  // position: 'center',
                  // formatter: '{b}\r\n{c}件，{d}%'
                }
              }
            ]
          })
        } else {
          this.$toast(res.data.errmsg)
        }
      })
    }
  }
}
</script>

<style>
</style>
