vue echarts 环图中间显示百分比

在vue echarts环图中间显示百分比，需要使用echarts的formatter属性来实现。具体步骤如下：

1. 在echarts的option中，找到series中的itemStyle和label设置，添加formatter属性，并设置为"{d}%"

2. 在series中找到center属性，设置为["50%", "50%"]，即可将环图居中显示。

下面是一个示例代码：

<template>
  <div class="chart-container">
    <v-chart :options="chartOptions" />
  </div>
</template>

<script>
import { VChart } from 'v-echarts';
import 'echarts/lib/chart/pie';

export default {
  name: 'PieChart',
  components: {
    VChart,
  },
  data() {
    return {
      chartOptions: {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ffffff',
            },
            center: ['50%', '50%'],
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
      },
    };
  },
};
</script>