参考 ant design minipie 的 UI 界面而制作,中间的调比和百分比,可以任选其一,由于使用title很难做到垂直居中,所以用了一个比较迂回的方法来实现。其他细节需要参考项目设计图来调整。
配置项如下
option = {
backgroundColor: '#fff',
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
show: false
},
data:[
{
value:335,
itemStyle: {
color: '#fa9645',
}
},
{
value:335,
itemStyle: {
color: '#f5f5f5',
emphasis: {color: '#f5f5f5'}
}
}
]
},
{
type: 'scatter',
data: [[0,0]],
symbolSize: 1,
label: {
normal: {
show: true,
fontSize: 14,
color: '#333',
formatter: [
'{a|标题}',
'{b|50%}'
].join('\n'),
rich: {
a: {
color: '#999',
fontWeight: 400,
padding: 5,
align: 'center'
},
b: {
fontSize: '24',
padding: 5,
align: 'center'
}
}
}
}
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
}
};