echarts中饼图的指示线加圆点
echart中饼图的指示线加圆点,圆点的颜色与指示线的颜色一致
let data = [{
"name": "业务1",
"value": 10
}, {
"name": "业务2",
"value": 15
}, {
"name": "业务3",
"value": 15
},
{
"name": "业务4",
"value": 25
},
{
"name": "业务5",
"value": 10
},
{
"name": "业务6",
"value": 25
},
];
let color = [ "#fec101", "#b5b8cd ", "#ff6226","#f60000","#2cc78f","#2ca7f9"]
// 这步主要是为了让小圆点的颜色和饼状图的块对应,如果圆点的颜色是统一的,只需要把label写在series里面
let setLabel = (data) => {
let opts = [];
for (let i = 0; i < data.length; i++) {
let item = {};
item.name = data[i].name;
item.value = data[i].value;
item.label = {
normal: {
//控制引导线上文字颜色和位置,此处a是显示文字区域,b做一个小圆圈在引导线尾部显示
show: true,
//a和b来识别不同的文字区域
formatter: [
'{a|{d}% {b}}',
'{b|}'
].join('\n'), //用\n来换行
rich: {
a: {
left: 20,
padding: [0, -80, -15, -80]
},
b: {
height: 5,
width: 5,
lineHeight: 5,
marginBottom: 10,
padding: [0, -5],
borderRadius: 5,
backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
}
},
}
}
opts.push(item)
}
return opts;
}
option = {
backgroundColor: '#fff',
animation: true,
series: [
{
color:color,
name: '饼图圆点',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
labelLine: {
normal: {
show: true,
length: 15, // 第一段线 长度
length2: 100, // 第二段线 长度
align: 'right'
},
emphasis: {
show: true
}
},
data:setLabel(data)
}
]
}
饼状图指示线圆点的颜色单一
let data = [{
"name": "业务1",
"value": 25
}, {
"name": "业务2",
"value": 10
}, {
"name": "业务3",
"value": 15
},{
"name": "业务4",
"value": 15
},
{
"name": "业务5",
"value": 25
},
{
"name": "业务6",
"value": 10
}
];
let color = ["#2ca7f9", "#fec101", "#b5b8cd ", "#ff6226","#f60000","#2cc78f"]
option = {
backgroundColor: '#fff',
animation: true,
series: [
{
color:color,
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
labelLine: {
normal: {
show: true,
length: 15, // 第一段线 长度
length2: 110, // 第二段线 长度
align: 'right'
},
emphasis: {
show: true
}
},
itemStyle:{
normal:{
//控制引导线上文字颜色和位置,此处a是显示文字区域,b做一个小圆圈在引导线尾部显示
label:{
show:true,
//a和b来识别不同的文字区域
formatter:[
'{a|{d}% {b}}',//引导线上面文字
'{b|}' //引导线下面文字
].join('\n'), //用\n来换行
rich:{
a:{
left:20,
padding:[0,-100,-20,-100]
},
b:{
height:5,
width:5,
lineHeight: 5,
marginBottom: 10,
padding:[0,-5],
borderRadius:5,
backgroundColor:'red',
}
},
}
}
},
data:data
}
]
}
请大家多多指教