涉及到两个问题，文字的上下排布和其他变量的引用，icon与文字之间的距离，padding有整个legend的内边距，也有仅仅文字的内边距，设置icon与文字的距离，就是在textStyle里设置padding,rich里面还有其他的文字类型的pading可以灵活设置
`
// 基于准备好的dom，初始化echarts实例
let myChart = this.echarts.init(document.querySelector(".rightechart"));
myChart.clear();
// 绘制图表
myChart.setOption({
color: ["#4FE0C0", "#A9DB6C", "#FFC539"],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(50,50,50,0.7)",
borderColor: "rgba(50,50,50,0.7)",
axisPointer: {
// Use axis to trigger tooltip
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
},
textStyle: {
color: "#FFFFFF",
fontStyle: "normal",
fontSize: 25,
},
},
legend: {
orient: "vertical",
right: 15,
top: "center",
icon: "circle",
itemWidth: 12, // 设置宽度
itemHeight: 12, // 设置高度
itemGap: 0, // 设置间距，
textStyle: {
fontSize: 13,
padding: [5, 0, 0, 10],
rich: {
name: {
fontSize: 13,
padding: [10, 0, 0, 0], //上，右，下，左
},
num: {
fontSize: 13,
padding: [10, 10],
color: "#078bad",
},
unit: {
fontSize: 13,
color: "#000",
},
},
},
formatter: (params) => {
var item = this.mxdfbData.find((item) => {
return item.name == params;
});
return [`{params|${params}}`, `{num|${item.value}}{unit|个}`].join(
"\n"
);
},
// data: this.mxdfbData,
},
grid: {
top: "0%",
left: "10%",
right: "10%",
bottom: "0%",
// containLabel: true
},
series: [
{
name: "Access From",
type: "pie",
label: {
show: true,
position: "inner",
normal: {
formatter: "{d}%",
},
},
labelLine: {
show: false,
length: 0,
length2: 0,
},
avoidLabelOverlap: false,
center: ["35%", "50%"],
radius: "65%",
data: this.mxdfbData,
// data: [
// {
// value: this.mxdfb[2].count,
// name: "B1明显点",
// },
// {
// value: this.mxdfb[0].count,
// name: "B2明显点",
// },
// {
// value: this.mxdfb[1].count,
// name: "B3明显点",
// },
// ],
},
],
});
window.addEventListener("resize", () => {
myChart.resize();
});
`
