配置后效果:👇
配置:
let option = {
legend: [
{
data: ["融云", "融AI", "融安全", "融平台"],
show: true,
right: "3%",
bottom: "20%",
left: "center",
icon: "rect",
itemWidth: 5,
itemHeight: 5,
// 图例项之间的水平间距
itemGap: 100,
formatter: function (name) {
let value = data.filter((v) => {
return v.name == name;
});
if (name == "融云") {
return `{label| ${name}: }\n {valueColor1|${
value.length > 0 ? value[0].value : 0
}%}`;
} else if (name == "融AI") {
return `{label| ${name}: }\n {valueColor2|${
value.length > 0 ? value[0].value : 0
}%}`;
} else if (name == "融安全") {
return `{label| ${name}: }\n {valueColor3|${
value.length > 0 ? value[0].value : 0
}%}`;
} else if (name == "融平台") {
return `{label| ${name}: }\n {valueColor4|${
value.length > 0 ? value[0].value : 0
}%}`;
}
},
textStyle: {
fontSize: 12,
color: "#fff",
rich: {
label: {
overflow: "truncate",
ellipsis: "...",
fontSize: 12,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
color: "rgba(160, 206, 224, 1)",
padding: [-15, 0, 0, 0],
},
valueColor1: {
overflow: "truncate",
ellipsis: "...",
fontSize: 18,
fontFamily: "ywptFont",
fontWeight: 400,
color: "#1630ff",
padding: [-40, 0, 0, 0],
},
valueColor2: {
overflow: "truncate",
ellipsis: "...",
fontSize: 18,
fontFamily: "ywptFont",
fontWeight: 400,
color: "#b4c9ef",
padding: [-40, 0, 0, 0],
},
valueColor3: {
overflow: "truncate",
ellipsis: "...",
fontSize: 18,
fontFamily: "ywptFont",
fontWeight: 400,
color: "#c700fc",
padding: [-40, 0, 0, 0],
},
valueColor4: {
overflow: "truncate",
ellipsis: "...",
fontSize: 18,
fontFamily: "ywptFont",
fontWeight: 400,
color: "#df3e27",
padding: [-40, 0, 0, 0],
},
},
},
},
{
data: ["融网", "融大数据", "容量子"],
show: true,
right: "3%",
bottom: "10%",
left: "3%",
icon: "rect",
itemWidth: 5,
itemHeight: 5,
// 图例项之间的水平间距
itemGap: 90,
formatter: function (name) {
let value = data.filter((v) => {
return v.name == name;
});
if (name == "融网") {
return `{label| ${name}: }\n {valueColor5|${
value.length > 0 ? value[0].value : 0
}%}`;
} else if (name == "融大数据") {
return `{label| ${name}: }\n {valueColor6|${
value.length > 0 ? value[0].value : 0
}%}`;
} else if (name == "容量子") {
return `{label| ${name}: }\n {valueColor6|${
value.length > 0 ? value[0].value : 0
}%}`;
}
},
textStyle: {
fontSize: 12,
color: "#fff",
rich: {
label: {
overflow: "truncate",
ellipsis: "...",
fontSize: 12,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
color: "rgba(160, 206, 224, 1)",
padding: [-15, 0, 0, 0],
},
valueColor5: {
overflow: "truncate",
ellipsis: "...",
fontSize: 18,
fontFamily: "ywptFont",
fontWeight: 400,
color: "#7dffbb",
padding: [-40, 0, 0, 0],
},
valueColor6: {
overflow: "truncate",
ellipsis: "...",
fontSize: 18,
fontFamily: "ywptFont",
fontWeight: 400,
color: "#ff9900",
padding: [-40, 0, 0, 0],
},
},
},
},
],
}