v-echart 图表的简单使用

<!--  -->
<template>
  <div class="staff-archives-charts">
    <div class="staff-archives-title">性别分布</div>
    <div>
      <ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-ring>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    this.chartExtend = {
      legend: {
        orient: 'vertical', //分类的类型
        x: 'center', //分类头的位置
        y: '80%',  //分类头的y轴位置
        show: true // 是否显示分类头
      },  // 隐藏legend
      color: ['#09f', '#eeeeee', '#468251', '#666666'], //分类的颜色
      series: {
        center: ['50%', '40%'] // 图的位置
      }
    }
    return {
      chartData: {
        columns: ['分类', '数量'],  //分类的数量
        rows: [
          { '分类': '0-3年', '数量': '50' },
          { '分类': '3-5年', '数量': '80' },
          { '分类': '5-8年', '数量': '58' },
          { '分类': '8-10年', '数量': '58' }
        ]
      },
      chartSettings: {
        radius: ['60px', '80px'], //echart设置
        itemStyle: {
          textAlign: 'center' // itemstyle位置
        },
        label: {
          formatter: params => {  // 返回显示的值（箭头指向的）
            console.log(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>