<template>
  <div class="container">
    <!-- <div v-if="pieData.length==0">
      <el-empty description="暂无数据"/>
    </div> -->
    <div id="echart"/>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['pieData'],
  data() {
    return {}
  },
  computed: {
    mapData() {
      if (this.pieData.length > 0) {
        return this.pieData
      } else {
        const data = [
          { total: 0, appName: '应用申请情况' }
        ]
        return data
      }
    }
  },
  watch: {
    mapData: {
      handler() {
        this.getLoadEcharts()
      },
      deep: true
    }
  },
  mounted() {
    this.getLoadEcharts()
  },
  methods: {
    getLoadEcharts() {
      const data = this.mapData.map(val => {
        return {
          value: val.total,
          name: val.appName
        }
      })
      const myChart = this.$echarts.init(document.getElementById('echart'))
      const option = {
        title: {
          text: '应用申请情况'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            data: data,
            label: {
              formatter: '{b}\n{c}'
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 350px;
  /* margin-top: 40px; */
}
#echart {
  width: 100%;
  height: 100%;
}
</style>
