v-echart中环形图中间添加文字

这里我将一个环形图做成了一个组件

需要父组件传入要显示的数据 和 环形图中间的文字
有时候环形图中间的文字一直没有办法显示需要注意

1. 需要将v-echarts全部引入，部分引入时会有问题，暂时不知道如何解决，就全部引入了
2. 考虑v-echart异步加载问题，在数据加载完成之后再去渲染组件，推荐使用v-if控制子组件的显示，数据加载完成之后再进行显示。

<template>
  <div>
    <ve-ring
      :data="chartData"
      :settings="chartSettings"
      :extend="chartExtend"
      width="293"
    >
    </ve-ring>
  </div>
</template>

<script>
export default {
  props: {
    getLoading: Boolean,
    getData: Array,
    centerText: String,
  },
  data() {
    this.chartExtend = {
      legend: { show: false }, //隐藏legend
      series: {
        center: ["50%", "50%"],
      },
      color: ["#F6695E", "#E3E3E3"],
      graphic: [ //为环形图中间添加文字
        {
          type: "text",
          left: "center",
          top: "45%",
          style: {
            text: this.centerText,
            textAlign: "center",
            fill: "#000",
            fontSize: 28,
          },
        },
        {
          type: "text",
          left: "center",
          top: "55%",
          style: {
            text: "逾期率",
            textAlign: "center",
            fill: "#999999",
            fontSize: 16,
          },
        },
      ],
    };
    return {
      chartSettings: {
        radius: ["60px", "80px"],
        label: { //对标签中 显示的文字进行设置
          formatter: (params) => {
            if (params.dataIndex === 0) {
              return `{a| ${params.data.name}}`;
            } else {
              return `{b| ${params.data.name}}`;
            }
          },
          rich: {
            a: {
              color: "#438de7",
            },
            b: {
              color: "#7b7d86",
            },
          },
        },
      },
    };
  },
  computed: {
    chartData() { //环形图的数据
      return {
        columns: ["status", "num"],
        rows: this.getData,
      };
    },
  },
};
</script>