<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" v-show="result && result.length>0" ref="myLineRank"></div>
    <div  v-if="!result || result.length==0" class="none-data">
      非常棒，你到现在还没有过客人投诉哟。
    </div>
  </div>
</template>
<script>
export default {
  props:{
    result:{
      type:Array,
      default:[]
    },
    total:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      tousus:null,
      loading:true
    };
  },
  mounted() {
    if(this.result && this.result.length>0){
      this.init();
    }
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      let dataItemName=[]
      this.result.forEach(x=>{
        dataItemName.push(x.name);
        x.value=x.rate
      })
      let data=this.result.filter(x=>{
        if(x.value>0)
          return x
      })
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "40%", //图例距离左的距离
          top: "12%", //图例上下居中
          data: dataItemName
        },
        calculable: true,
        graphic: [
          {
            type: "text",
            left: "17%",
            top: "30%",
            style: {
              text: this.total,
              textAlign: "center",
              fill: "#A2A4A7", //文字的颜色
              fontSize: 32,
              width:120,
              fontFamily: "pingfangR"
            }
          },
          {
            type: "text",
            left: "14%",
            top: "48%",
            style: {
              text: "累计投诉",
              textAlign: "center",
              fill: "#A2A4A7", //文字的颜色
              fontSize: 14,
              fontFamily: "pingfangR"
            }
          }
        ],
        calculable : true,
        series: [
          {
            center: ["20%", "40%"],
            name: "投诉详情",
            type: "pie",
            radius: ["50%", "70%"],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                borderWidth: 2,
                borderColor: "#fff",
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#FFB822",
                    "#34BFA3",
                    "#FD3995",
                    "#5D78FF",
                    "#8e44ad"
                  ];
                  return colorList[params.dataIndex];
                }
              },
              emphasis: {
                label: {
                  show: true,
                  center: ["30%", "40%"],
                  textStyle: {
                    fontSize: "18",
                    fontFamily: "pingfangR"
                  }
                }
              }
            },
            data: data
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.inerank-container {
  height: 100%;
  width: 100%;
}
.none-data{
  padding: 50px 0;
  text-align: center;
  color: gray;
  font-size: 12px;
}
</style>