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

<script>
export default {
  name: 'PieChart',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    this.extend = {
      // series: {
      //   label: {
      //     normarl: { show: true, position: 'outside' }
      //   }
      //   // label: { show: true, position: 'right' }
      // }
    }
    this.legend = {
      bottom: '10px'
    }
    this.tooltip = {
      show: true
    }
    this.chartSettings = {
      limitShowNum: 5,
      label: {
        normal: {
          show: true
        }
      }
      // labelMap: {
      //   'deptName': '单位/部门',
      //   'num': '记录数'
      // },
      // dimension: ['deptName'],
      // metrics: ['num']
    }
    return {
      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>