<template>
  <div ref="main" style="width:400px ;height:300px;"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "DoughnutData",
  props:{
    resultData: {
      type: Array,
      default: []
    },
    titleText:{
      type:String,
    },
    PieColor:{
      type: Array,
      default: ['#8c42a1', '#4fa5e7']
    }
  },
  watch:{
    resultData(){
      this.$nextTick(function() {
        this.getPie()
      })
    }
  },


  methods: {
    getPie() {
      var _this=this
      // 绘制图表
      var myChart = echarts.init(this.$refs.main)
      myChart.on('click',(params)=>{
        _this.$emit('visible', {tdsyxz:params.data.name,sfsb:"3"});
        if(params.data.name == "有证"){
          _this.$emit('visibleCard', {wjlx:"证书",sfsb:"3"});
          _this.$emit('visibleZs', {zslx:"不动产权证书,国有土地使用证",sfsb:"3"});
        }else if(params.data.name == "无证"){
          _this.$emit('visibleCard', {wjlx:"合同,文件,无",sfsb:"3"});
          _this.$emit('visibleZs', {zslx:"无,无权属证明材料,文件合同等权属证明材料",sfsb:"3"});
        }



      })
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: this.titleText,
          x: 'left' ,              //标题位置
          // textStyle: { //标题内容的样式
          //   color: '#000',
          //   fontStyle: 'normal',
          //   fontWeight: 100,
          //   fontSize: 16 //主题文字字体大小，默认为18px
          // },
        },
        // stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: 'item',
          formatter: '{b}:{c} ({d}%)'
        },
        //图例
        legend: {//图例  标注各种颜色代表的模块

          bottom: 10,//控制图例出现的距离  默认左上角
        },
        //饼图中各模块的颜色
        color: this.PieColor,//['#4676ff', '#1ad4cb','#7E2F98FF','#DC6593FF'],
        // 饼图数据
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true

                },
                labelLine: {
                  length: 1,
                  show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                }
              },
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              normal : {
                formatter: '{b}:({d}%)',
                textStyle : {
                  fontWeight : 'normal',
                  fontSize : 14
                }
              },
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,

              }
            },
            labelLine: {
              show: false
            },
            data: this.resultData
          }
        ]

      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>