<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ComProgressPieChart', //进度饼图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  mounted() {
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      let unit = this.chartData.unit
      let total =
        parseInt(this.chartData.building) + parseInt(this.chartData.nobuilding) + parseInt(this.chartData.finished)
      let data = [
        {
          value: this.chartData.building,
          name: '正在施工'
        },
        {
          value: this.chartData.nobuilding,
          name: '未施工'
        },
        {
          value: this.chartData.finished,
          name: '已完工'
        }
      ]
      let list = []
      data.forEach((item) => {
        list.push(
          {
            value: item.value,
            name: item.name
          }
          // {
          //   value: 1,
          //   name: '',
          //   itemStyle: {
          //     color: 'rgba(0, 0, 0, 0)',
          //     borderColor: 'rgba(0, 0, 0, 0)',
          //     borderWidth: 0
          //   }
          // }
        )
      })
      let option = {
        color: ['rgba(14, 167, 255, 1)', 'rgba(210, 169, 44, 1)', 'rgba(3, 170, 105, 1)'],
        backgroundColor: 'transparent',
        title: {
          show: true,
          left: 'center',
          top: 'center',
          text: `${total}\n${unit}`,
          textStyle: {
            color: 'rgba(150, 210, 255, 1)',
            fontSize: this.$listeners.fontSize(14)
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (params.name === '') {
              return ''
            } else {
              return `${params.marker}${params.name}:${params.value}`
            }
          },
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          confine: true
        },
        series: [
          {
            type: 'pie',
            radius: ['65%', '85%'],
            center: ['50%', '50%'], //饼图位置确定不能由grid来设置,需要使用center和radius要设置
            clockwise: false,
            data: list,
            label: {
              show: false,
              formatter: function (params) {
                if (params.name === '') {
                  return ``
                } else {
                  return `{a|${params.value}}\n{b|${params.name}}`
                }
              },
              rich: {
                a: {
                  fontSize: this.$listeners.fontSize(16),
                  color: '#fff'
                },
                b: {
                  fontSize: this.$listeners.fontSize(14),
                  color: 'rgba(130, 186, 226, 1)'
                }
              }
            },
            labelLine: {
              show: false,
              length2: 0
            }
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang='scss' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>