<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import {debounce} from '../../utils/debounce'

export default {
  name: 'PieEchart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: function () {
      this.$nextTick(()=>{
        this.initChart()
      })
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions({yData} = {}) {
      this.chart.setOption(
        {
          tooltip: {
            show:false
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '75%'],
              center: ['50%', '50%'],
              hoverAnimation:false,
              label: {
                show: false
              },
              lableLine: {
                show: false
              },
              data: [
                {
                  value: yData[0],
                  name: '空余',
                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                          offset: 0,
                          color: '#00CAFE' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#2772F4' // 100% 处的颜色
                        }]
                      },
                    }
                  }
                },
                {
                  value: yData[1],
                  name: '占有',

                  itemStyle: {
                    normal: {
                      color: {
                        colorStops: [{
                          offset: 0,
                          color: '#FFBA00' // 0% 处的颜色
                        }, {
                          offset: 1,
                          color: '#FF8100' // 100% 处的颜色
                        }]
                      },
                    }
                  }
                },

              ],
              animationType: 'scale',
              animationEasing: 'elasticOut'
            },
            {
              name: '', type: 'pie',
              clockWise: true,hoverAnimation: false,
              radius: ['90%', '90%'],
              label: { normal: { position: 'center' }},
              data: [{
                value: 0,
                label: {
                  normal: {
                    formatter:  '50.5%',//小数点后一位
                    textStyle: {
                      color: '#fe8b53',
                      fontSize: 18,
                      fontWeight: 'normal'
                    }
                  }
                }
              }, {
                tooltip: {show: false},
                label: {
                  normal: {
                    formatter: '\n占有',
                    textStyle: {
                      color: '#bbeaf9',fontSize: 12
                    }
                  }
                }
              }]
            }

          ]
        }
      )
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this.chartData)
    },

  }
}
</script>
