<template>
  <!-- 饼图 -->
  <div style="width:100%;height:100%;textAlign:center;margin:-15px 0;" :id="id">
  </div>
</template>
<script>
import echarts from "echarts"
export default {
  name: "doughnut",
  props: {
    id: {
      type: String,
      default: function createRandomId() {
        return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
      }
    },
    renderData: {
      type: Array,
      default: function () {
        return []
      }
    },
    type: {},
    name: "",
    sum: ""
  },
  data() {
    return {
      myCharts: null
    }
  },
  created() { },
  mounted() {
    this.drawDoughnut()
  },
  methods: {
    drawDoughnut() {
      let options = {
        tooltip: {
          trigger: 'item',
          formatter: ""
        },
        series: [
          {
            // name: '占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.renderData,
            label: {
              normal: {
                show: true,
                position: 'outside',
                textStyle: {
                  fontSize: '11'
                }
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                lineStyle: {
                  color: '#999'
                }
              },
              emphasis: {
                show: true
              }
            }
          },
        ],
      }
      this.myCharts = echarts.init(document.getElementById(this.id))
      this.myCharts.setOption(options)
    },
    delName(val) {
      if (!!val && val.length > 3) {
        return val.substring(0, 3) + '...'
      } else {
        return ''
      }
    }
  },
  watch: {
    renderData: {
      deep: true,
      handler: function () {
        this.drawDoughnut()
      }
    }
  }
}
</script>
<style>
</style>