<template>
<div class="wrap">
  <div  id="supplierScore" ref="supplierScore" class="chart" @click="handle"></div>
</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "circleChar",
  props:['data','bgColor','titleText','isStore'],
  data(){
    return{
    }
  },
  mounted() {
  /*  if(this.data){
      this.drawHandle();
    }*/
    setTimeout(()=>{
      this.drawHandle();
    },500)

  },
  methods:{
    initCircle(){
      // setTimeout(()=>{
        this.drawHandle();
      // },500)
    },
    handle(){
      if(this.titleText == '投诉率'){
        this.$emit('clickComplain')
      }else if(this.titleText == '使用率'){
        this.$emit('clickUse')
      }
    },
    // 绘制 总分图表
    drawHandle() {
      let supplierScoreChart = echarts.init(this.$refs.supplierScore)
      let option;
      let arrow=(this.titleText == '投诉率' || this.titleText == '使用率') ? '>' : ''
      const gaugeData = [
        {
          value: this.data,
          name: this.isStore ? '' : this.titleText+arrow,
          title: {
            offsetCenter: ['0%', '20%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', this.isStore ? '10%' : '-25%']

          }
        }
      ];
      option = {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              // width:6,
              itemStyle:{
                color:this.bgColor
              }
            },
           /* axisLine: {
              lineStyle: {
                width:12,
              }
            },*/
            splitLine: { show: false},
            axisTick: { show: false},
            axisLabel: {show: false},
            data: gaugeData,
            title: {
              fontSize: 11,
              color:'rgba(4, 4, 21,0.45)'
            },
            detail: {
              color:this.isStore ? this.bgColor : (this.bgColor || '#040415'),
              fontSize: this.isStore ? 43 :19,
              formatter: this.isStore ? '{value}' : '{value}%'
            }
          }
        ]
      };
      // 绘制图表
      option && supplierScoreChart.setOption(option, true);
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
  @include flexCenter;
}
.img{
  @include whMarLe(12px,10px,4px);
}
.chart{
  width: 100%;
  height: 125px;
}
</style>
