<!--  -->
<template>
  <div class="staff-archives-charts">
    <div class="staff-archives-title">{{title}}</div>
    <div>
      <ve-ring
        height="300px"
        :data="dataInfo"
        :extend="color.length>0?Object.assign({},chartExtend,{color}):chartExtend"
        :settings="chartSettings"
      ></ve-ring>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    title: {
      type: String,
      default: () => '分布'
    },
    color: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chartExtend: {
        legend: {
          x: 'center',
          y: '80%',
          show: true
        },
        series: {
          center: ['50%', '40%'],
          itemStyle: {
            borderWidth: 2, // 设置border的宽度有多大
            borderColor: '#fff'
          }
        }
      },
      chartData: {
        columns: ['分类', '数量', '占比'],
        rows: [
          { '分类': '0-3年', '数量': '50', '占比': '10%' },
          { '分类': '3-5年', '数量': '80', '占比': '10%' },
          { '分类': '5-8年', '数量': '58', '占比': '10%' },
          { '分类': '8-10年', '数量': '58', '占比': '10%' }
        ]
      },
      chartSettings: {
        radius: ['60px', '80px'],
        itemStyle: {
          textAlign: 'center'
        },
        label: {
          formatter: params => {
            return `{a|${params.data.name}\n${params.data.value}人}`
          },
          rich: {
            a: {
              color: '#ccc',
              textAlign: 'center'

            }
          }
        }

      }
    }
  },
  computed: {},
  beforeMount () { },
  mounted () { },
  methods: {},
  watch: {}

}
</script>

<style lang='scss' scoped>
.staff-archives-charts {
  // width: 50%;
}
</style>