<template>
  <div :id="'pieChart'+id" style="width:100px; height:100px ;">
  </div>
</template>

<script type="text/ecmascript-6">
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
   props: {
    chartData: {
      type: Number,
      default() {
        return null
      }
    },
    chartColor: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: Number,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      echartImg: null
    }
  },
  mounted() {
    this.initEchartsData()
  },
  methods: {
    initEchartsData() {
      const myChart = echarts.init(document.getElementById('pieChart' + this.id))
      const option = {
        color: this.chartColor,
        tooltip: {
            trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
        {
        animation: false,
        hoverAnimation: false,
        silent: true,
        type: 'pie',
        radius: ['90%', '100%'],
        // center: ['50%', '40%'],
        data: [
        {
          value: this.chartData,
          series: [{
          }],
          itemStyle: {
          },
          label: {
            show: true, // 单独显示该数据项
            formatter: '{d}',
            fontSize: 24,
            emphasis: {
              show: true
            }
          }
        },
        {
          value: 100 - this.chartData,
          itemStyle: {
            emphasis: { color: '#EEEEEE' },
            normal: { color: '#EEEEEE' }
          },
          label: {
            show: false,
            // emphasis: {
            //   show: true
            // },
             formatter: '{d}'
          }
        }
      ],
      itemStyle: {
        normal: {}
      },
      label: {
        normal: {
          // 默认不显示数据
          show: true,
          position: 'center'
        },
        color: '#fff'
        }
        }
        ]
      }

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    const opt = {
      // 注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
      type: 'jpg',
      // 导出的图片分辨率比例，默认为 1。
      ixelRatio: 1,
      // 导出的图片背景色，默认使用 option 里的 backgroundColor
      backgroundColor: ''
      // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
      // excludeComponents: Array.<string>
      }
      this.echartImg = myChart.getDataURL(opt)
    }
  },
   watch: {
      chartData: {
        handler() {
          this.initEchartsData()
        },
        deep: true
      }
    }

}
</script>
