<template>
  <div>
<!--    <div id="chart"></div>-->
  </div>
</template>

<script>
export default {
  name: "CheckPig",
  data() {
    return {
      myChart: null,
      timer: null
    }
  },
  methods: {
    init() {
      let minAngle = 10;// 最小扇形区域为30
      let data = [{name: '1', value: 200, }, {name: '2', value: 500, }, {name: '3', value: 100, },{name: '4', value: 1000, } ]
      for ( let i = 0; i < data.length; i++ ) { //某项数据为0时，最小扇形区域为0
        if ( data[ i ].value === 0 ) {
          minAngle = 0;
          break;
        }
      }
      const pieValue = data.map( v => {
        return v.value;
      } )
      const sum = pieValue.reduce( ( prev, cur ) => {//数据值的总和
        return prev + cur;
      }, 0 );
      const sum2 = pieValue.reduce( ( prev, cur ) => {
        if ( cur < sum / 12 && cur > 0 ) {//某个值大于0小于总和的1/12即30时，按30计算和
          return prev + sum / 12;
        }
        return prev + cur;
      }, 0 );
      let initPieValue = pieValue[ 0 ];// 初始值
      if ( initPieValue < sum / 12 && initPieValue > 0 ) {
        initPieValue = sum / 12;
      }
      const option = {
        color: [ '#44bbf8', '#93e588', '#ffd87b', '#f88071' ],
        series: [
          {
            name: '测试',
            type: 'pie',
            radius: [ '30%', '60%' ],
            center: ['40%', '50%'],
            clockWise: false,
            clickable: false,
            startAngle: 300,
            minAngle: minAngle,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{a} \n{b}: {c} ({d}%)",
                color: '#fff',
                fontWeight: 'bold',
                fontSize: 18
              }
            },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: data
        }

      ],
        animationDuration: 0,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };
      this.myChart.setOption( option );
      this.myChart.dispatchAction( { type: 'highlight', seriesIndex: 0, dataIndex: 0 } );
      let preDataIndex = 0;
      // 开始循环
      this.timer = setInterval(() => {
        if(preDataIndex > 3 ) {
          preDataIndex = 0;
        }
        const sum1 = pieValue.reduce( ( prev, cur, index ) => {
          if ( index < preDataIndex ) {
            if ( cur < sum / 12 && cur > 0 ) {
              return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12

            }

            return prev + cur;

          }

          return prev;

        }, 0 );

        let curPieValue = pieValue[ preDataIndex ];

        if ( curPieValue < sum / 12 && curPieValue > 0 ) {
          curPieValue = sum / 12;
        }
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
        });
        option.series[ 0 ].startAngle = 300 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
        //
        this.myChart.setOption( option );

        window.setTimeout( () => {
          this.myChart.dispatchAction( {
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: preDataIndex
          } );
          this.myChart.dispatchAction({
            type: 'showTip',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            // 可选，数据的 index
            dataIndex: preDataIndex,
          })
          preDataIndex++;

        }, 1500);
      }, 8000)
      let that = this;
      this.myChart.on('mouseover', (v) => {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
        });
        preDataIndex = v.dataIndex;
        this.myChart.dispatchAction( {
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: preDataIndex
        });
        clearInterval(that.timer);
      })
      this.myChart.on('mouseout', () => {
        this.timer = setInterval(() => {
          if(preDataIndex > 3 ) {
            preDataIndex = 0;
          }
          const sum1 = pieValue.reduce( ( prev, cur, index ) => {
            if ( index < preDataIndex ) {
              if ( cur < sum / 12 && cur > 0 ) {
                return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12

              }

              return prev + cur;

            }

            return prev;

          }, 0 );

          let curPieValue = pieValue[ preDataIndex ];

          if ( curPieValue < sum / 12 && curPieValue > 0 ) {
            curPieValue = sum / 12;
          }
          this.myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            // dataIndex: preDataIndex  === 0 ? 3 : preDataIndex - 1
          });
          option.series[ 0 ].startAngle = 300 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
          //
          this.myChart.setOption( option );

          window.setTimeout( () => {
            this.myChart.dispatchAction( {
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: preDataIndex
            } );
            this.myChart.dispatchAction({
              type: 'showTip',
              // 可选，系列 index，可以是一个数组指定多个系列
              seriesIndex: 0,
              // 可选，数据的 index
              dataIndex: preDataIndex,
            })
            preDataIndex++;

          }, 1500);
        }, 8000)
      })

    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chart'));
    // this.init()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
  #chart {
    width: 500px;
    height: 500px;
  }
</style>
