<template>
  <div class="full-size">
    <div
      ref="myEchart"
      class="full-size"
    ></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {

    }
  },
  watch: {
    chartData: {
      deep: true,
      handler (newVal) {
        this.chartData = newVal
        this.draw()
      }
    }
  },
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
      const myEchart = echarts.init(this.$refs.myEchart, 'light')
      const o = this.chartData

      const option = {
        color: ['#3A68F2', '#DEDEDE'],
        series: [
          Object.assign({}, {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '55%'],
            label: {
              normal: {
                show: true,
                formatter: function (p) {
                //   const t = o.lineBreak ? '\n' : ' '
                  //   ${p.value + o.unit}
                  return `{a|${p.name}}{b| ${p.percent}%}`
                },
                rich: {
                  a: {
                    color: '#666666',
                    fontSize: 16
                  },
                  b: {
                    color: '#666666',
                    fontSize: 16
                  }
                }
              }
            }

          }, o.series),
          o.firstSeries || ''
        ]
      }
      myEchart.setOption(option)
    }
  }
}
</script>
