<template>
  <div ref="pie_wrap" :style="{ height: height, width: width }"></div>
</template>

<script>
export default {
  props: {
    // pieData: null,
    // color: null,
    pieName: null,
    pieObj: null,
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
  },
  data() {
    return {
      elId: '',
      chartPie: null,
      pieData: [
        { id: 'men', value: 0, name: '男性用户' },
        { id: 'women', value: 0, name: '女性用户' },
        { id: 'gender', value: 0, name: '未知人数' }
      ],
    }
  },
  created() {
    let userTotal = this.$findParentsAttr('userTotal')
    this.pieData.forEach((item, index) => {
      for (let key in userTotal) {
        if (item.id == key) {
          item.value = userTotal[key]
          delete item.id
        }
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChart();
    })
  },
  methods: {
    drawPieChart() {
      let _this = this
      this.chartPie = this.$echarts.init(this.$refs.pie_wrap);
      this.chartPie.setOption({
        title: {
          text: '男女人数占比',
          bottom: 100,
          left: 'center',
          textStyle: {
            color: '#222222',  //更改坐标轴文字颜色
            fontSize: 24  //更改坐标轴文字大小
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 15,
          left: 'center',
          textStyle: {
            color: '#666666',  //更改坐标轴文字颜色
            fontSize: 16  //更改坐标轴文字大小
          },
          // data: ['男性用户', '女性用户', '未知人数'],
          formatter: function (name) {
            // 获取legend显示内容
            let data = _this.pieData;
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length;i < l;i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let p = (tarValue / total * 100).toFixed(0);
            return name + ' ' + ' ' + p + '%';
          },
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            // label: {
            //   show: false,
            //   position: 'center',
            // },
            emphasis: {
              label: {
                show: false,
                fontSize: '18',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            label: {
              show: false
            },
            top: -130,
            color: ['#F4057B', '#0575F4', '#ECECEC'],
            data: _this.pieData
          }

        ]
      });
    }
  }
}
</script>

<style lang='scss' scope>
.pie-wrap {
  width: 100%;
  height: 100%;
}
</style>