圆环的引导线怎么控制?让引导线平均分两边,而且起点都在中心线上
配置项如下
option = {
title: {
text: '圆环的视觉引导线怎么控制?'
},
series: [
{
name: "0",
type: "pie",
clockWise: !1,
radius: ["10%", "15%"],
center: ["50%", "50%"],
hoverAnimation: !1,
startAngle: 90,
data: [{
value: 80,
name: "黄色",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: "rgba(255, 245, 81, .6)"
}, {
offset: 1,
color: "rgba(255, 245, 81, 1)"
}])
}
},
label: {
show: !0
},
labelLine: {
show: !0
}
}, {
value: 20,
tooltip: {
show: !1
},
itemStyle: {
color: "rgba(255, 255, 255, .2)"
},
label: {
show: !1
},
labelLine: {
show: !1
}
}]
},
{
name: "1",
type: "pie",
clockWise: !1,
radius: ["20%", "25%"],
center: ["50%", "50%"],
hoverAnimation: !1,
startAngle: 90,
data: [{
value: 40,
name: "红色",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: "rgba(250, 103, 3, .6)"
}, {
offset: 1,
color: "rgba(250, 103, 3, 1)"
}])
}
},
label: {
show: !0
},
labelLine: {
show: !0
}
}, {
value: 60,
name: "",
tooltip: {
show: !1
},
itemStyle: {
color: "rgba(255, 255, 255, .2)"
},
label: {
show: !1
},
labelLine: {
show: !1
}
}]
},
{
name: "2",
type: "pie",
clockWise: !1,
radius: ["30%", "35%"],
center: ["50%", "50%"],
hoverAnimation: !1,
startAngle: 90,
data: [{
value: 30,
name: "绿色",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: "rgba(3, 248, 160, .6)"
}, {
offset: 1,
color: "rgba(3, 248, 160, 1)"
}])
}
},
label: {
show: !0
},
labelLine: {
show: !0
}
}, {
value: 100 - 30,
name: "",
tooltip: {
show: !1
},
itemStyle: {
color: "rgba(255, 255, 255, .2)"
},
label: {
show: !1
},
labelLine: {
show: !1
}
}]
},
{
name: "3",
type: "pie",
clockWise: !1,
radius: ["40%", "45%"],
center: ["50%", "50%"],
hoverAnimation: !1,
startAngle: 90,
data: [{
value: 40,
name: "蓝色",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: "rgba(60, 150, 253, .6)"
}, {
offset: 1,
color: "rgba(60, 150, 253, 1)"
}])
}
},
label: {
show: !0
},
labelLine: {
show: !0
}
}, {
value: 100 - 40,
name: "",
tooltip: {
show: !1
},
itemStyle: {
color: "rgba(255, 255, 255, .2)"
},
label: {
show: !1
},
labelLine: {
show: !1
}
}]
}]};