<template>
  <div class="charts chart-pie" ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
// import tdTheme from './theme.json'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: ['datas'],
  watch: {
    datas (newVal) {
      // this.$nextTick(() => {
      //   this.render()
      // })
      this.$nextTick(() => {
        if (!newVal || newVal.length === 0) {
          return
        }
        this.render()
      })
    }
  },
  methods: {
    render () {
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} {b}: {d}%'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: '60%',
          align: 'left',
          top: 'middle',
          textStyle: {
            color: '#000'
          },
          height: 250,
          width: 400
        },
        grid: {
          left: 10,
          right: 10
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['0%', '70%'],
            avoidLabelOverlap: false,
            data: this.datas,
            label: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      let dom = echarts.init(this.$refs.dom)
      dom.setOption(option)
    }
  }
}
</script>
<style scoped>
</style>
