<template>
  <ve-pie :data="chartData" :legend="legend" :extend="extend" :settings="chartSettings"/>
</template>

<script>
export default {
  name: 'PieChart',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    this.extend = {
      series: {
        label: { show: true, position: 'outside', formatter: '{b}:{c}' }
        // label: { show: true, position: 'right' }
      }
    }
    this.legend = {
      bottom: '10px'
    }
    this.chartSettings = {
      labelMap: {
        'deptName': '单位/部门',
        'num': '记录数'
      },
      dimension: ['deptName'],
      metrics: ['num']
    }
    return {
      rawData: '',
      chartData: {
        columns: ['deptName', 'num'],
        rows: []
      }
    }
  },
  watch: {
    list(val) {
      this.chartData.rows = val
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-title{
    margin: auto;
    text-align: center;
    margin-top: 15px;
    font-size:20px;
    font-weight:600
  }
  .select-right{
    /*margin-right: 25px;*/
    margin-top: 15px;
    /*width: 200px*/
  }
</style>