<template>
  <div class='wrapper' :id="id">
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    list: function(val) {
      this.drawChart()
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const chart = echarts.init(document.getElementById(this.id))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function() {
        chart.resize()
      })
      const info = []
      if (this.list.length > 0) {
        this.list.forEach(row => {
          info.push({
            value: row.count,
            name: row.connectorType
          })
        })
      }
      chart.setOption(
        {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {d}% <br/> {c}'
          },
          series: [{
            type: 'pie',
            radius: ['48%', '64%'],
            center: ['50%', '50%'],
            color: ['#71e4e2', '#417cfa', '#7d98ff', '#5473e8', '#62c9a7'],
            data: info,
            cursor: 'default',
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                  color: '#000',
                  width: 1
                }
              }
            },
            label: {
              normal: {
                formatter: '{b|{b}}\n{hr|}\n{d|{d}%}',
                rich: {
                  b: {
                    fontSize: 14,
                    color: '#000',
                    align: 'left',
                    padding: 4
                  },
                  hr: {
                    borderColor: '#000',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  d: {
                    fontSize: 14,
                    align: 'left',
                    padding: 4
                  },
                  c: {
                    fontSize: 14,
                    align: 'left',
                    padding: 4
                  }
                }
              }
            }
          }]
        }
      )
    }
  }
}
</script>

<style scoped>
  .wrapper {
    width: 100%;
    height: 100%;
  }
</style>
