<template>
  <chart v-if="pieChartId" :id="pieChartId" class="chart__pie" height="300px" width="100%" :options="chartOptions" />
</template>

<script>
import Chart from '@/components/Charts/Keyboard'
export default {
  components: { Chart },
  props: {
    chartId: {
      type: String,
      default: ''
    },
    sexInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      pieChartId: null,
      chartOptions: {}
    }
  },
  mounted() {
    this.drawBar()
  },
  methods: {
    drawBar() {
      this.pieChartId = this.chartId
      this.chartOptions = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          containLabel: true
        },
        series: [
          {
            // name: this.legend[0],
            // data: this.yAxisData,
            data: [
              {
                value: this.sexInfo.female || 0,
                name: '女性',
                labelLine: {
                  normal: {
                    show: true,
                    length: 24,
                    length2: 80,
                    lineStyle: {
                      color: 'rgba(191, 200, 234, 1)',
                      width: 1
                    }
                  }
                }
              },
              {
                value: this.sexInfo.male || 0,
                name: '男性',
                labelLine: {
                  normal: {
                    show: true,
                    length: 24,
                    length2: 80,
                    lineStyle: {
                      color: 'rgba(191, 200, 234, 1)',
                      width: 1
                    }
                  }
                }
              }
            ],
            type: 'pie',
            radius: ['30%', '55%'],
            color: ['#ffc165', '#2F44FF'],
            center: ['50%', '50%'], // 饼图位置
            label: {
              formatter: function(arg) {
                return `{b|${arg.name}：${arg.percent}%}\n{per|${arg.value}人}`
              },
              borderWidth: 20,
              borderRadius: 4,
              padding: [0, -100],
              rich: {
                b: {
                  color: 'rgba(191, 200, 234, 1)',
                  fontSize: 12,
                  lineHeight: 33
                },
                per: {
                  color: 'rgba(240, 245, 255, 1)',
                  fontSize: 12,
                  lineHeight: 33,
                  fontWeight: 'bold'
                }
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style></style>
