原理
使用一个默认颜色为透明的，并且只显示labelLine的饼状图
然后通过调节这个透明的饼状图 以达到修改labelLine的位置
echarts地址
/?c=x6VnXPfxlx
echarts源码：
option = {
backgroundColor: "#03141c",
title: {
text: "84%",
subtext: '完成部门占比',
x: 'center',
y: 'center',
textStyle: {
color: "#fff",
fontSize: 30,
fontWeight: 'normal'
},
subtextStyle: {
color: "rgba(255,255,255,.45)",
fontSize: 14,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
data: ['rose3', 'rose5', 'rose6', 'rose7', 'rose8']
},
calculable: true,
series: [
{
type: 'pie',
radius: [80, 120],
center: ['50%', '50%'],
data: [
{
value: 10,
name: '吴际帅\n牛亚莉',
itemStyle: {
color: "transparent"
}
},
{
value: 90,
name: 'rose2',
itemStyle: {
color: new (0, 1, 0, 0, [{
offset: 0,
color: '#0ce4da'
}, {
offset: 1,
color: '#f6fb08'
}])
},
labelLine: {
show: false,
length: 200,
length2: 100
},
label: {
color: "rgba(255,255,255,.45)",
fontSize: 14,
show: false,
position: 'outside',
formatter: '客户满意度\n{a|52}个',
rich: {
a: {
color: "#fff",
fontSize: 20,
lineHeight: 30
},
}
}
}
]
},
{ // 指示线
// 通过value 的值 调节lableLine的位置
type: 'pie',
radius: [80, 100],
data: [
{
value: 100,
itemStyle: {
color: 'transparent'
}
},
{
value: 50,
itemStyle: {
color: "transparent"
},
labelLine: {
show: true,
length: 2,
length2: 240,
color: 'orange',
lineStyle: {
color: 'orange'
}
},
label: {
color: "rgba(255,255,255,.45)",
fontSize: 14,
position: 'outside',
formatter: '客户满意度\n{a|52}个',
rich: {
a: {
color: "#fff",
fontSize: 20,
lineHeight: 30
},
}
}
}
]
},
{
type: 'pie',
radius: [80, 100],
center: ['50%', '50%'],
data: [{
value: 10,
itemStyle: {
color: '#06d3cd'
},
labelLine: {
show: false
}
},
{
value: 90,
itemStyle: {
color: "transparent"
}
}
]
}
]
};