const color = [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
];
let OptionData = [
{ name: "退休", value: 61 },
{ name: "下岗", value: 30 },
{ name: "无业", value: 40 },
{ name: "在职", value: 55 },
{ name: "待业", value: 24 },
{ name: "其他", value: 36 },
];
let option = {
backgroundColor: "#02193F",
color: color,
polar: {
radius: 80,
center: ["50%", "50%"],
},
angleAxis: {
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
radiusAxis: {
min: 10,
max: 10,
interval: 10,
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#0076FA",
width: 0.5,
type: "solid",
},
},
},
series: [
{
type: "pie",
silent: true,
clockwise: true,
radius: ["33%", "34%"],
center: ["50%", "50%"],
label: {
show: false,
},
labelLine: {
show: false,
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#4A9DF2", // 0% 处的颜色
},
{
offset: 1,
color: "#8655DF", // 100% 处的颜色
},
],
},
},
data: [0],
},
{
type: "pie",
silent: true,
clockwise: true,
radius: ["32%", "33%"],
center: ["50%", "50%"],
label: {
show: false,
},
labelLine: {
show: false,
},
itemStyle: {
color: "#fff",
},
data: [0],
},
{
type: "pie",
silent: true,
clockwise: true,
radius: ["20%", "22%"],
center: ["50%", "50%"],
label: {
show: false,
},
labelLine: {
show: false,
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#4A9DF2", // 0% 处的颜色
},
{
offset: 1,
color: "#8655DF", // 100% 处的颜色
},
],
},
},
data: [0],
},
{
stack: "a",
type: "pie",
radius: ["40%", "68%"],
center: ["50%", "50%"],
silent: true, // 鼠标悬浮效果
clockwise: true, // 鼠标悬浮效果
roseType: "area",
zlevel: 10,
label: {
show: true,
formatter: (val) => {
// return `{C|${val.data.name}}` + `{B|\n${val.data.value}家}\n{B|${val.percent}%}`
return `{C|${val.data.name}}` + `{B|\n${val.data.value}人}`;
},
rich: {
B: {
align: "left",
fontSize: 14,
padding: [5, 0, 0, 0],
},
C: {
align: "left",
fontSize: 14,
padding: [5, 0, 0, 0],
},
},
},
labelLine: {
normal: {
show: true,
length: 20,
length2: 35,
lineStyle: {
type: "dashed",
},
},
},
data: OptionData.map((item, index) => {
return {
label: {
color: color[index],
},
...item,
};
}),
},
],
};