1、效果图
需要两端对齐,并且加上圈
2、代码
const colors = [
"#0056E3",
"#4193E8",
"#47C1B0",
"#47C16F",
"#CDDC39",
"#F1C43E",
"#E8793F",
"#E8493F",
"#D500FF",
"#8C00FF",
"#5C00FF",
"#000EE3",
];
let data = [
{value: "1065.00", name: "租客"}
{value: "234.00", name: "未关联客户"}
{value: "845.00", name: "其他亲友"}
{value: "1619.00", name: "儿媳/女婿"}
{value: "1864.00", name: "岳父母/公婆"}
{value: "2042.00", name: "兄弟姐妹"}
{value: "2291.00", name: "子女"}
{value: "2427.00", name: "父母"}
{value: "1000.00", name: "夫妻"}
{value: "1442.00", name: "业主"}
{value: "1294.00", name: "共有业主"}
{value: "693.00", name: "其他"}
]
let leftJson = {
租客: 0,
未关联客户: 1,
其他亲友: 2,
"儿媳/女婿": 3,
"岳父母/公婆": 4,
兄弟姐妹: 5,
子女: 6,
父母: 7,
夫妻: 8,
业主: 9,
共有业主: 10,
其他: 11,
};
const Option = {
color: colors,
tooltip: {
trigger: "item",
formatter: function (params) {
return `${params.marker}${params.data.name}<span style='margin-left:10px'>${params.data.value}</span>%`;
},
},
series: [
{
type: "pie",
radius: ["40%", "60%"],
center: ["50%", "50%"],
data: data,
label: {
formatter: function (v) {
if (leftJson[v.data.name] <= 5) {
return `{hr|} ${v.data.name} ${v.data.value}%`;
} else {
return `${v.data.name} ${v.data.value}% {hr|}`;
}
},
rich: {
hr: {
//auto自定义
width: 2,
height: 2,
borderRadius: 5,
borderWidth: 2,
borderColor: "auto",
padding: [2, 2, 0, 0],
},
// a: {
// padding: [-14, 50, -20, 15],
// },
},
position: "outer",
alignTo: "edge",
margin: 20,
},
left: "10%",
right: 0,
top: 0,
bottom: 0,
},
],
};