<template>
      <div :id="chartId" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: '万(㎡)'
    },
    tiplabel: {
      type: String,
      default: ''
    },
    chartId: {
      type: String,
      required: true
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    showPercent: {
      type: Boolean,
      default: true
    },
    showCenter: {
      type: Boolean,
      default: false
    },
    centerValue: {
      type: String,Number,
      default: ''
    },
  },
  data() {
    return {
      myChart: undefined
    }
  },
  watch: {
    data: {
      handler: function(newVal, oldVal) {
        this.init()
        this.setOptions()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById(this.chartId))
      this.setOptions()
      window.addEventListener('resize', () => {
        setTimeout(() => {
          this.myChart.resize()
        }, 300)
      })
    },

    setOptions() {
      if(!this.myChart) {
        return
      }

      let option

      if (this.data && this.data.length == 0 ) {
        option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1578D9'
            }
          }
        }
      } else {
        option = {
          title: {
            text: this.title ? this.title : '',
            x: 'center',
            top: '20',
            textStyle: {
              fontSize: 18,
              fontWeight: 'normal',
              color: '#000'
            }
          },
          legend: {
            show: false,
            right: '10',
            orient: 'vertical',
          },
          graphic: this.showCenter ? [
            {
              //环形图中间添加文字
              type: "text", //通过不同top值可以设置上下显示
              left: "center",
              top: "center",
              style: {
                text: `${this.centerValue}\n平方米`,
                textAlign: "center",
                fill: "#1E7CE8", //文字的颜色
                fontSize: 15,
                lineHeight: 18,
              },
            },
          ] : [],
          tooltip: {
            trigger: 'item',
            backgroundColor: '#ffffff',
            borderColor:'#1578D9',
            formatter: (params) => {
              let unit = this.unit
              let tiplabel = this.tiplabel
              let res=""
              res+='<div style="font-size: 14px;text-align: left;color: #000000;">'+ '<div><span>'+params.name+'</span></div>'+ '<div ><span>'+tiplabel+'：'+params.value+unit+'</span></div>'+'<div><span>比例：'+params.percent+'%'+'</span></div>'  +'</div>'
              return res
            },
          },
          series: [
            {
              type: 'pie',
              data: this.data,
              radius: ['30%', '50%'],
              label: {
                formatter: (series) => {
                  console.log("series",series)
                  const data = series.data
                  return `{a|${data.name}}\n{b|${data.value}}{c|${this.unit}},{d|${series.percent}%}`
                },
                show: true,
                verticalAlign: 'middle',
                borderWidth: 0,
                width: 100,
                // backgroundColor: '#1578D9',
                borderStatus: 30,
                rich: {
                  a: {
                    padding: [12, 0, 2, 0],
                    // color: '#eeeded',
                    fontSize: 16,
                    align: 'center',
                  },
                  b: {
                    padding: [2, 0, 8, 0],
                    // color: '#f2f2f2',
                    fontSize: 16,
                    align: 'center',
                  }
                }
              },
              labelLine: {
                show: true
              },
            }
          ]
        }
      }
      this.myChart.clear()
      this.myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  height: 100%;
}
</style>