vue echarts饼状图内部显示百分比

实现效果：

1.首先 在components下面新建一个capacityPieChart.vue 组件页面

注意：因为我这边饼图需要自适应以及饼图是有多个 需要循环展示 所以引入了两个方法~

//饼状图
<template>
  <div
    :class="className" :style="{ height: height, width: width }" style="margin-top: 20px"
  />
</template>

<script>
require("echarts/theme/macarons"); // echarts theme
import { debounce } from "@/utils";
export default {
  props: {
    caPieItems: Object,
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      optionsData: [],
      opinionName: ["已使用", "未使用"],
    };
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.changeData();
      console.log(this.optionsData, "this.caPieItems");
      this.chart = this.$echarts.init(this.$el, "macarons");
      this.chart.setOption({
        color: ["#A4B6C9", "#4E7095"] /*饼状图的颜色*/,
        tooltip: {
          trigger: "item",
          formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
        },
        legend: {
          left: "center" /*标签文字排成一行*/,
          y: "bottom" /*在垂直方向上的底部*/,
          data: this.opinionName,
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 16,
          },
        },

        series: [
          {
            type: "pie", //饼状图
            center: ["50%", "40%"], //显示位置
            name: "",
            type: "pie",
            radius: ["0%", "60%"] /*空心圆的占比*/,
            data: this.optionsData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                borderWidth: 2 /*隔开的白色边界*/,
                borderColor: "#fff" /*border*/,
                // labelLine :{show:true}
              },
            },

            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 200,
                  fontSize: 20, //文字的字体大小
                },
                formatter: "{d}%" /*饼状图内显示百分比*/,
                // data:['40%','60%'],
              },

              emphasis: {
                show: false /*空心文字出现*/,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
      });
    },
    // 处理数据
    changeData() {
      if (this.caPieItems) {
        this.optionsData = [
          {
            value: this.caPieItems.usedPosCount,
            name: "已使用",
          },
          {
            value: this.caPieItems.totalPosCount - this.caPieItems.usedPosCount,
            name: "未使用",
          },
        ];
      }
    },
  },
};
</script>

页面使用：

   <!-- 饼图 -->
<template>
 <capacityPieChart :caPieItems="item" />
</template>

item:是接口返回的数据 传给饼图

<script>
import capacityPieChart from "../../../components/Echarts/capacityPieChart.vue";
</script>
components: {
    capacityPieChart,
  },

参考文章：https://blog.csdn.net/qq_40693615/article/details/103407151