<template>
  <div
    :id="id"
    :style="`width:${curWidth}px;height:${curHeight}px;`"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description pie环形饼图（产业经济-企业行业分析 | 产业经济-产业结构分析）
 * @props 数据格式：{
 *    id: 'traffic_govern_id',
      width: 0,
      height: 0,
      seriesData: [
        {value:34, name:'申报立案'},
        {value:25, name:'调查取证'},
      ]
    }
 *
 */

import {countSize} from '@/utils/utils'
export default {
  props: ['id', 'width', 'height', 'seriesData'],
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: 20,
          containLabel: true
        },
        legend: {
          // align: "left",
          orient: 'horizontal',
          x: '20',
          y: 'bottom',
          itemGap: 15,
          itemWidth: 8,
          itemHeight: 8,
          // width: 1,
          // padding: [ 5, 5, 5, 0],
          textStyle: {
            color: '#fff',
            fontSize: 11,
            lineHeight: '0'

          }
          // data:[]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{d}%',
          textStyle: {
            fontSize: 11
          }
        },
        color: ['#00e04c', '#2182e5', '#de00db', '#101dfc', '#ff9900'],
        series: [
          {
            animationType: 'expansion',
            type: 'pie',
            radius: ['30%', '45%'],
            center: ['50%', '40%'],
            startAngle: 140,
            label: {
              show: true,
              formatter: [
                '{style1|{b}}',
                '{style2|{d}%}'
              ].join('\n'),
              lineHeight: 14,
              rich: {
                style1: {
                  color: '#fff',
                  fontSize: 11
                },
                style2: {
                  fontWeight: 'bolder',
                  fontSize: 14,
                  fontFamily: 'DS-DigitalBold'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 11,
                  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.length) {
      this.option.series[0].data = this.seriesData
      this.initEchart()
    }
  },
  methods: {
    refreshEchart () {
      if (this.curWidth && this.curHeight && this.seriesData.length) {
        this.initEchart()
      }
    },
    initEchart () {
      const _div = document.getElementById(this.id)
      setTimeout(() => {
        let myChart = this.$echarts.init(_div)
        myChart.setOption(this.option, true)
        window.onresize = myChart.resize
      }, 500)
    }
  }
}
</script>

<style scoped>
</style>