<!--
 * @Author: gpp
 * @Date: 2021-08-11 15:48:40
 * @LastEditTime: 2021-08-11 17:03:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \productweb\src\components\eCharts\userPie.vue
-->
<template>
  <div class="pieStyle" ref="pie_wrap">

  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '未知标题'
      },
      text: {
        type: String,
        default: '100%'
      },
      color:{
        type: Array,
        default: ['#25b925','#629cf7','#f9ab35']
      },
      data:{
        type:Array,
        default: [{value:1,name:"男"},{value:2,name:"女"},{value:3,name:"未知"}]
      }
    },
    data() {
      return {
        options: {},
      }
    },
    created() {
      this.setEchartOption();
    },
    watch: {
      'options': {
        handler(newval, oldval) {
          if (newval !== oldval) {
            this.$nextTick(() => {
              this.initEchartPie();
            })

          }
        },
        deep: true,
      }
    },
    methods: {
      initEchartPie() {
        let myChart = this.$echarts.init(this.$refs.pie_wrap);
        myChart.setOption(this.options, true);
      },
      setEchartOption() {
        const options = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          title: {
            text: this.title,
            left: "center",
            top: "52%",
            textStyle: {
              color: "#6E7079",
              fontSize: 18,
            }
          },
          color:this.color,
          graphic: {
            type: "text",
            left: "center",
            top: 'middle',
            z: 0,
            zlevel: 0,
            style: {
              fontSize: 36,
              text: this.text,
              textAlign: "center",
              fill: "#333",
              fontWeight: 600,
            }
          },
          series: [{
            name: this.title,
            type: 'pie',
            radius: ['45%', '60%'],
            avoidLabelOverlap: false,
            labelLine: {
              length: 30,
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 5
            },
            label: {
              normal: {
                show: true,
                position: 'outer',
                formatter: '{a|{b}}\n{b|{d}%}  ',
                rich: {
                  a: {
                    color: '#6E7079',
                    fontSize: 18,
                    align: 'center'
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 24,
                    fontWeight: 'bold',
                    lineHeight: 30,
                    align: 'left'
                  }
                }
              }
            },
            data: this.data
          }]
        };
        this.options = options
      },
    }
  }

</script>
<style lang='scss' scoped>
  .pieStyle {
    height: 90%;
  }
</style>
