
<template>
  <div>
    <div class="text-1">
      <div :id="charts"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ringChart",
    /*
    环形图
    sdata   :  展示的数据
    legend : 展示那些显示那些不显示
    title   :  标题
    setTime   :  tootip 轮播的时间 默认 1500
    showtooltip : 是否展示 提示框 默认展示
    colorList : 传入的颜色列表

     */
    props: [
      'sdata',
      'legend',
      'colorList',
      'setTime',
      'showtitle',
      'showtooltip',
      'title'

    ],
    data() {
      return {
        canvas: 'canvas_'+new Date().getTime()+'_'+Math.random()*10,
        charts: 'charts_'+new Date().getTime()+'_'+Math.random()*10,
        xc: '',
        timer: '',
        time:1500,
        showtTip:true,   // 轮播提示框 默认展示
        cshowtitle:true, //标题 默认展示
        ccolorList:['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar(){
        let colorList=this.ccolorList
        this.xc = this.$echarts.init(document.getElementById(this.charts))

        if(this.setTime!==undefined){
          this.time=this.setTime
        }
        if(this.colorList!==undefined){
          colorList=this.colorList
        }
        if(this.showtooltip!==undefined){ // 判断提示框
          this.showtTip=this.showtooltip
        }
        if(this.showtitle!==undefined){ // 判断标题
          this.cshowtitle=this.showtitle
        }
        this.xc.setOption(
          {
            title: {
              text: this.title,
              x: 'center',
              y: 'center',
              textStyle: {
                color: '#201b1b'
              },
              show:this.cshowtitle
            },
            tooltip: {
              trigger: 'item',
              // borderColor: 'rgba(255,255,255,.3)',
              // backgroundColor: 'rgba(13,5,30,.6)',
              extraCssText: 'width:auto;height:25%;',
              borderWidth: 1,
              padding: 5,
              formatter: function(parms) {
                var str = parms.marker + "" + parms.data.name + "</br>" +
                  "" + parms.data.value + "</br>" +
                  "占比：" + parms.percent + "%";
                return str;
              },
              show:this.showtTip
            },
            legend: {
              top: '30',
              textStyle: {
                color: '#161414',
                fontSize:18
              },
              data: this.legend
            },
            series: [{
              type: 'pie',
              z: 3,
              center: ['50%', '50%'],
              radius: ['25%', '45%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function(params) {
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: false,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',
                rich: {
                  hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                  },
                  a: {
                    padding: [-30, 15, -20, 15]
                  }
                }
              },
              labelLine: {
                show:false,
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1
                  }
                }
              },
              data: this.sdata
            }]
          }
        )
        let index = 0;
        let myChart=this.xc
        this.timer = setInterval(() => {
          myChart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index
          });
          // 显示提示框
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
          });
          // 取消高亮指定的数据图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index === 0 ? 5 : index - 1
          });
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
          });
          index++;
          if (index > 5) {
            index = 0;
          }

        }, this.time)
      }

    },
    watch: {
      'sdata'(){
        //清除定时器
        clearInterval(this.timer);
        this.setBar()
      }
    },
    ready() {
      this.setBar()

    }
  }
</script>

<style scoped>

</style>
