echarts饼状图中心文字与图片位置/解决偏移问题，可直接复制！

设置饼状图中心点文字与图片一般来说只用设置 elements，并将left和top设置为center就可以保证文字图片位于正中央

代码：与series同级添加如下代码

graphic: {
          //设置中心图片及文字
          elements: [
            {
              type: "image", //通过不同top值可以设置上下显示
              left: "center",
              // left: 75,
              // left: 'calc(100% - 80px)',
              top: "center",
              style: {
                image: require("@/assets/images/statisic/zhuangshi1.png"), // 添加你想要展示的图片的URL
                width: 90,
                height: 90,
                top: "center" // 图片距离容器顶部的距离
                // left: 75 // 图片距离容器左侧的距离
              }
              // position: [75, 30],
            },
            {
              type: "text", //通过不同top值可以设置上下显示
              left: "center",
              top: "center",
              style: {
                text: "状态分布",
                textAlign: "center",
                fill: "#000", //文字的颜色
                width: 30,
                height: 30,
                fontSize: 14,
                color: "#6c6c6c",
                fontFamily: "Microsoft YaHei"
              }
            }
          ]
        },

如果图表本身并不是居于中间，而且偏左或偏右，这时候left就要使用百分比或数值，这种情况下容器宽高不固定的话就会有问题了!只有刷新才能保证中心位置否则会出现偏移情况！网上的设置resize方法已经试过了不管用

解决方法如下：

{
            
            type: "pie",
            emphasis: {
              scale: true,
              scaleSize: 25
            },
            radius: ["50%", "65%"],
            // radius: ["50%", "69%"],
            center: ["20%", "50%"], // 控制饼状图位置
            color: loopColor,
            labelLine: {
              normal: {
                show: false //指示线隐藏
              }
            },
            // label: {
            //   normal: {
            //     show: true,
            //     formatter: "状态分布",
            //     textStyle: {
            //       fontSize: 14
            //     },
            //     position: "center"
            //   }
            // },
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: [
                  "{a|状态分布}" // 使用富文本标记设置文字样式和背景图片
                ].join("\n"),
                rich: {
                  a: {
                    color: "#333",
                    fontSize: 14,
                    width: 90, // 设置背景图片宽度
                    height: 90, // 设置背景图片高度
                    backgroundColor: {
                      image: require("@/assets/images/statisic/zhuangshi1.png")// 设置背景图片
                    }
                  }
                }
              }
            },
            data: this.chartData
          }

这是利用富文本标记设置文字和背景图片，基于图表本身来设置避免了偏移情况！

完整代码如下可直接复制：

图表子组件：

<template>
  <div class="pieChart">
    <div ref="chart" id="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["pieDatas"],
  data() {
    return {
      chartData: [],
      rel: {},
    };
  },
  created() {},
  mounted() {
    this.initChart();
  },
  methods: {
    initData() {
      this.chartData.forEach(res => {
        this.rel[res.name] = res.value;
      });
    },
    initChart() {
      this.chartData = this.pieDatas;
      this.initData();
      echarts.init(this.$refs.chart).dispose();
      let myChart = echarts.init(this.$refs.chart);
      let fontSize = 20;
      let loopColor = [
        "#0046ff",
        "#7b00ff",
        "#2dcf56",
        "#ffd732",
        "#fb6126",
        "#2cb5f8"
      ];
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} 占比{d}%"
        },
        legend: {
          show: true,
          itemWidth: 5, //图例大小  我这里用的是圆
          itemGap: 15, //图例之间的间隔
          orient: "vertical", //布局方式，默认水平布局，另可选horizontal
          // y: "80%", //垂直放的位置，可以写top，center，bottom，也可以写px或者百分比。x轴方向同理，默认center
          icon: "circle",
          right: "20%",
          top: "center",
          formatter: name => {
            let list = this.chartData;
            let total = 0;
            let value = 0;
            list.forEach(item => {
              total += item.value;
              if (item.name == name) {
                value = item.value;
              }
            });
            var p = ((value / total) * 100).toFixed(2); //求出百分比
            return `${name}${this.rel[name]} 占比${p}%`;
          }
        },
        // graphic: {
        //   //设置中心图片及文字
        //   elements: [
        //     {
        //       type: "image", //通过不同top值可以设置上下显示
        //       left: "12.5%",
        //       // left: 75,
        //       // left: 'calc(100% - 80px)',
        //       top: "center",
        //       style: {
        //         image: require("@/assets/images/statisic/zhuangshi1.png"), // 添加你想要展示的图片的URL
        //         width: 90,
        //         height: 90,
        //         top: "center" // 图片距离容器顶部的距离
        //         // left: 75 // 图片距离容器左侧的距离
        //       }
        //       // position: [75, 30],
        //     },
        //     // {
        //     //   type: "text", //通过不同top值可以设置上下显示
        //     //   left: "15.5%",
        //     //   top: "center",
        //     //   style: {
        //     //     text: "状态分布",
        //     //     textAlign: "center",
        //     //     fill: "#000", //文字的颜色
        //     //     width: 30,
        //     //     height: 30,
        //     //     fontSize: 14,
        //     //     color: "#6c6c6c",
        //     //     fontFamily: "Microsoft YaHei"
        //     //   }
        //     // }
        //   ]
        // },
        series: [
          // 外圈环
          {
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            z: -1,
            radius: ["76%", "78%"],
            // radius: ["84%", "83%"],
            center: ["20%", "50%"], // 控制饼状图位置
            color: "#FFF0E0", //外环颜色
            label: {
              normal: {
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            tooltip: {
              show: false
            },
            // data:()=>{
            //   let arr=[]
            //    this.chartData.filter(item=>{
            //     arr.push({
            //       value:item.value,
            //       name:''
            //     })
            //   })
            //   return arr
            // }
            data: [
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              },
              {
                value: 100,
                name: ""
              }
            ]
          },
          {
            type: "pie",
            emphasis: {
              scale: true,
              scaleSize: 25
            },
            radius: ["50%", "65%"],
            // radius: ["50%", "69%"],
            center: ["20%", "50%"], // 控制饼状图位置
            color: loopColor,
            labelLine: {
              normal: {
                show: false //指示线隐藏
              }
            },
            // label: {
            //   normal: {
            //     show: true,
            //     formatter: "状态分布",
            //     textStyle: {
            //       fontSize: 14
            //     },
            //     position: "center"
            //   }
            // },
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: [
                  "{a|状态分布}" // 使用富文本标记设置文字样式和背景图片
                ].join("\n"),
                rich: {
                  a: {
                    color: "#333",
                    fontSize: 14,
                    width: 90, // 设置背景图片宽度
                    height: 90, // 设置背景图片高度
                    backgroundColor: {
                      image: require("@/assets/images/statisic/zhuangshi1.png")// 设置背景图片
                    }
                  }
                }
              }
            },
            data: this.chartData
          }
        ]
      };
      myChart.setOption(option, true);
    }
  },
  components: {},
  watch: {
    pieDatas: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal) {
          this.initChart();
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pieChart {
  width: 100%;
  height: 100%;
  #chart {
    width: 100%;
    height: 100%;
  }
}
</style>

pieDatas数据格式： 

pieDatas: [
        {
          value: 55.0,
          key: "zzrbhdn",
          name: "备案"
        },
        {
          value: 15.0,
          key: "zzrbhdw",
          name: "可研"
        },
        {
          value: 45.0,
          key: "zzrbhdw",
          name: "初验"
        },
        {
          value: 5.0,
          key: "zzrbhdw",
          name: "设计"
        },
        {
          value: 45.0,
          key: "zzrbhdw",
          name: "施工"
        },
        {
          value: 45.0,
          key: "zzrbhdw",
          name: "综验"
        }
      ],

最后效果：