vue 饼图模板，避免了文字被覆盖

<template>
  <div>
    <v-chart :forceFit="true" :height="height"  :data="data" :scale="scale"
    :onClick="handleClick" :padding="['70', '0', 'auto', 'auto']">
      <v-tooltip :showTitle="false" dataKey="item*percent"/>
      <v-axis/>
      <v-legend dataKey="item"/>
      <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig"/>
      <v-coord type="theta"/>
    </v-chart>
  </div>
   
</template>
 
<script>
  const DataSet = require('@antv/data-set')
  import { ChartEventMixins } from './mixins/ChartMixins'
 
  export default {
    name: 'Pie',
    mixins: [ChartEventMixins],
    props: {
      title: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 254
      },
      dataSource: {
        type: Array,
        default: () => [
          { item: '示例一', count: 40 },
          { item: '示例二', count: 21 },
          { item: '示例三', count: 17 },
          { item: '示例四', count: 13 },
          { item: '示例五', count: 9 }
        ]
      }
    },
    data() {
      return {
        scale: [{
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }],
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        },
        labelConfig: ['percent', {
          formatter: (val, item) => {
            return item.point.item + ' ：' + item.point.count + ' (' + val+ ')' ;
          }
        }],
        config: {
              pie: {
                  label: {
                      fontSize: 12, // 设置字体大小
                      formatter: '{b|{b}}\n{hr|}\n{c|{c}}', // 使用自定义格式化字符串
                      rich: { // 富文本样式设置
                          b: {
                              fontWeight: 'bold',
                              color: 'rgba(0, 0, 0, .8)'
                          },
                          hr: {
                              backgroundColor: '#ccc',
                              height: 1,
                              borderRadius: 1
                          },
                          c: {
                              color: 'rgba(0, 0, 0, .5)'
                          }
                      }
                  }
              }
          }
      }
    },
    computed: {
      data() {
        let dv = new DataSet.View().source(this.dataSource)
        // 计算数据百分比
        dv.transform({
          type: 'percent',
          field: 'count',
          dimension: 'item',
          as: 'percent'
        })
        return dv.rows
      }
    }
  }
</script>