在饼图制作中遇到了一个难点就是饼图中间是分散的   试了很多方法，最后选择了给每个值中间再加一节的处理方式，并把颜色设置为透明就能达到相同效果。

处理后的样式：

代码：

      let list = this.data.list;/饼图内部展示数据
      // let _this = this;//存储当前this
      let total = Math.max(...list.map(item => item.value));
      let gap = total * (12 / 360);//通过计算得出间隔值
      this.myChart1 = echarts.init(this.$refs["chart-pie"]);
      let data = [];
      for (var i = 0; i < list.length; i++) {
        data.push(
          {
            value: list[i].value,
            name: list[i].name,
            itemStyle: {
              normal: {
                borderColor: this.color[i],
                color: this.color[i]
              }
            }
          },
          {
            value: gap,//间隔值
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",//间隔颜色设置为透明
                borderWidth: 0
              }
            },
            emphasis: {
              label: {
                show: false
              }
            }
          }
        );
      }

完整代码：

<template>
  <!-- 柱状图 -->
  <div class="ticket public-row">
    <div class="echarts-left fl">
      <div class="mychart" :class="{ 'fix-position': data.list.length > 5 }" :id="chartId" ref="chart-pie"></div>
    </div>
    <div class="text-right fl">
      <div
        class="text-right-item c-p"
        :class="{ acitve: active === index }"
        @click="changeText(index)"
        v-for="(item, index) in data.list"
        :key="index"
      >
        <div class="text-color fl" :class="'color' + index"></div>
        <div class="text-right-item-title fl">{{ item.name }}</div>
        <div class="text-right-item-num fl">{{ item.value }}</div>
        <div class="text-border fl"></div>
        <div class="text-right-item-type">{{ item.mixins }}</div>
      </div>
    </div>
  </div>
  <!-- <p v-else class="m-t20 m-l20">暂无数据</p> -->
</template>

<script>
let dashedPic = require("./img/huanxingtu.png");
export default {
  name: "base-pie",
  components: {},
  props: {
    chartId: {
      type: String,
      default: "chartId2"
    },
    data: {
      type: Object,
      default() {
        return {
          data: [
            { name: "OTA", value: 3124, mixins: "28%" },
            { name: "窗口", value: 3124, mixins: "28%" },
            { name: "小程序", value: 3124, mixins: "28%" },
            { name: "旅行社", value: 3124, mixins: "28%" }
          ],
          number: 9000,
          name: "总票数",
          unit: "张"
        };
      }
    },
    color: {
      type: Array,
      default() {
        return [
          "rgba(47, 107, 255, 1)",
          "rgba(34, 220, 213, 1)",
          "#FC8452",
          "#9A60B4",
          "#73C0DE",
          "#3CA272",
          "#ea7ccc"
        ];
      }
    },

    //显示样式
    typeId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      myChart1: "",
      active: 0
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      // setTimeout(() => {
      // debugger;
      this.init();
      // }, 500);
    });
  },
  watch: {
    data: {
      handler() {
        this.$nextTick(() => {
          this.init();
        });
      },
      deep: true
    }
  },
  beforeDestroy() {},
  computed: {},
  methods: {
    /**
     * @description:选中切换
     * @param {*} item
     * @Description:
     * @return {*}
     */

    changeText(item) {
      this.active = item;
    },
    /**
     * @description:init 初始化
     * @param {*} item
     * @Description:
     * @return {*}
     */
    init() {
      if (this.myChart1) this.myChart1.dispose();
      if (!this.data) return false;
      let list = this.data.list;
      console.log(list);
      // let _this = this;
      let total = Math.max(...list.map(item => item.value));
      let gap = total * (12 / 360);
      this.myChart1 = echarts.init(this.$refs["chart-pie"]);
      let data = [];
      for (var i = 0; i < list.length; i++) {
        data.push(
          {
            value: list[i].value,
            name: list[i].name,
            itemStyle: {
              normal: {
                borderColor: this.color[i],
                color: this.color[i]
              }
            }
          },
          {
            value: gap,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0
              }
            },
            emphasis: {
              label: {
                show: false
              }
            }
          }
        );
      }

      let option = {
        backgroundColor: "",
        title: [
          {
            text: this.data.number,
            top: "35%",
            left: "center",
            textStyle: {
              fontSize: 26,
              fontFamily: "DIN",
              color: "#ffffff"
            },
            subtext: this.data.name,
            // subtext: "总票数",
            subtextStyle: {
              fontSize: 14,
              color: "rgba(223, 245, 252, 1)"
            }
          },
          {
            text: this.data.unit,
            top: "38%",
            textAlign: "center",
            left: "74%",
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 18,
              fontWeight: "400"
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(9, 30, 60, 0.6)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
          borderWidth: 0,
          confine: false,
          appendToBody: true,
          textStyle: {
            color: "#fff",
            fontSize: 10
          }
        },
        legend: null,
        // 可动态生成颜色集合
        // color: this.color,
        series: [
          {
            name: "项目规模占比",
            type: "pie",
            radius: ["80%", "98%"],
            label: {
              show: false
            },
            data: data
          }
        ],
        graphic: {
          elements: [
            {
              itemStyle: {
                opacity: 0.8 // 设置整个系列的数据点的透明度
              },
              type: "image",
              style: {
                image: dashedPic,
                width: 154,
                height: 154,
                opacity: 0.6
              },
              left: "center",
              top: "center"
            }
          ]
        }
      };

      this.myChart1.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.mychart {
  width: 100%;
  height: 100%;
}
.ticket {
  overflow: hidden;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  .echarts-left {
    margin-top: 16px;
    width: 153px;
    height: 153px;
  }
  .text-right {
    margin-left: 21px;
    // margin-top: 30px;
    .text-right-item {
      width: 226px;
      margin-bottom: 10px;
      line-height: 24px;
      height: 24px;
    }
    .acitve {
      background: url(./img/xuanzhong.png) no-repeat;
    }
    .text-color {
      width: 3px;
      height: 16px;
      line-height: 16px;
      margin-right: 8px;
      margin-left: 13px;
      margin-top: 4px;
    }
    .text-right-item-title {
      width: 72px;
      font-size: 14px;
    }
    .color0 {
      background: radial-gradient(#a1ffb6 0%, #c7fff5 100%);
    }
    .color1 {
      background: radial-gradient(#7ab8ff 0%, #c7fff5 100%);
    }
    .color2 {
      background: radial-gradient(#a1ffb6 0%, #c7fff5 100%);
    }
    .color3 {
      background: radial-gradient(#a1ffb6 0%, #c7fff5 100%);
    }
    .text-border {
      width: 1px;
      height: 14px;
      margin: 4px 12px 0;
      border-right: 1px solid rgba(255, 255, 255, 0.4);
    }
  }
  .fix-position {
    top: -25px;
  }
}
</style>