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

处理后的样式：

代码：

      let list = this.data.list;/饼图内部展示数据// let _this = this;//存储当前thislet 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"><divclass="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>