<template>
  <div
    :id="id"
    :style="`width:${curWidth==0?'100%':curWidth};height:${curHeight==0?'100%':curHeight}`"
  >
  </div>
</template>
<script>
/**
   * @author 王晓颖
   * @date 2020/08/18
   * @Description 普通饼图
   * @props 数据格式：{
   *    id: '',
      width: 0,
      height: 0,
      xAxisData:[],
      seriesData: []
    }
   *
   */
export default {
  name: 'SimplePieChart',
  props: {
    id: { // id
      type: String,
      default: 'simplePieChart'
    },
    width: { // 宽
      type: Number | String,
      default: '100%'
    },
    height: { // 高
      type: Number | String,
      default: '100%'
    },
    radius: { // 饼图的半径[内半径，外半径]
      type: Array,
      default: () => {
        return ['30%', '45%']
      }
    },
    fontFamily: { // 值显示字体
      type: String,
      default: ''
    },
    roseType: { // 是否要展示成玫瑰图，或玫瑰图类型:radius|area
      type: String | Boolean,
      default: false
    },
    colors: { // 颜色组
      type: Array,
      default: () => { return ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348', '#90ed7d', '#f7a35c', '#8085e9'] }
    },
    fontColor: { // 标签文字颜色
      type: String,
      default: '#ffffff'
    },
    valueType: { // 显示值类型：percentage百分比|value数值
      type: String,
      default: 'percentage'
    },
    labelShow: {
      type: Boolean,
      default: true
    },
    labelFormatter: {
      type: String,
      default: ''
    },
    hoverFormatter: {
      type: String,
      default: '{b}<br/>{c}<br/>{d}%'
    },
    seriesData: { // 数据
      type: Array,
      default: () => { return [] }
    }

  },
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          trigger: 'item',
          formatter: this.hoverFormatter,
          textStyle: {
            fontSize: 15
          }
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: 20,
          containLabel: true // 是否包含坐标轴的刻度标签
        }, // 网格
        color: this.colors,
        series: [
          {
            animationType: 'expansion', // 沿圆弧展开效果 expansion|scale
            type: 'pie',
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            roseType: this.roseType, // 玫瑰图类型
            radius: this.radius, // 饼图的半径[内半径，外半径]
            center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
            startAngle: 140,
            label: {
              show: this.labelShow,
              formatter: this.labelFormatter,
              fontSize: 19,
              lineHeight: 19,
              rich: {
                style1: {
                  color: this.fontColor,
                  fontSize: 16
                },
                style2: {
                  fontWeight: 'bolder',
                  fontSize: 19,
                  fontFamily: this.fontFamily
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 17,
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              length: 10,
              length2: 15
            },
            data: [
              // {value:34, name:'申报立案'},
            ]
          }
        ]
      }
    }
  },
  watch: {
    width (newVal, oldVal) {
      this.curWidth = newVal
      this.refreshEchart()
    },
    height (newVal, oldVal) {
      this.curHeight = newVal
      this.refreshEchart()
    },
    seriesData (newVal, oldVal) {
      this.option.series[0].data = newVal
      this.refreshEchart()
    }
  },
  mounted () {
    if (this.seriesData && this.seriesData.length) {
      // 格式化
      if (this.labelFormatter) {
        this.option.series[0].label.formatter = this.labelFormatter
      } else {
        if (this.valueType === 'percentage') {
          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{d}%}'
        } else if (this.valueType === 'value') {
          this.option.series[0].label.formatter = '{style1|{b}}\n{style2|{c}}'
        }
      }
      this.option.series[0].data = this.seriesData
      this.initEchart()
    }
  },
  methods: {
    refreshEchart () {
      if (this.curWidth && this.curHeight && this.seriesData && this.xAxisData) {
        this.initEchart()
      }
    },
    initEchart () {
      const _div = document.getElementById(this.id)
      setTimeout(() => {
        let myChart = this.$echarts.init(this.$el)
        myChart.setOption(this.option, true)
        window.onresize = myChart.resize
      }, 500)
    }
  }
}
</script>

<style scoped>
</style>