Ĵ近日做项目需要用到echarts的环形图,但官网原生样式无法满足需求,故将样式进行修改,效果图如下:
官网原图:
我需要修改的:
1.去掉边框和百分比
2.文字上移至牵引线的上方
3.自定义样式
代码如下
app.title = '环形图';
option = {
tooltip: {
trigger: 'item',
formatter: " {b}:{c} "
// ({d}%) 代表该模块所占圆环比例
// formatter: "{a} <br/>{b}: {c} ({d}%)"
},
//环形颜色
color:['#ffb616','#ccc'],
legend: {
orient: 'vertical',
show: false,
x: 'left',
data: ['视频广告', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['30%', '40%'],
labelLine: {
normal: {
length: 20,
length2: 70,
lineStyle: {
color: '#333'
}
}
},
label: {
normal: {
// \n\n可让文字居于牵引线上方,很关键
// {b} 代表显示的内容标题
// {c}代表数据
formatter: ' {b}:{c} \n\n',
borderWidth: 20,
borderRadius: 4,
padding: [0, -70],
rich: {
a: {
color: '#333',
fontSize: 12,
lineHeight: 20
},
b: {
fontSize: 12,
lineHeight: 20,
color: '#333'
}
}
}
},
data: [{
value: 8,
name: '视频广告'
}, {
value: 35,
name: '其他'
}]
}
]
};
结果图: