项目场景:
在饼图中间加入圈和文字,且会随着饼图位置改变,三者位置处于相对静止
效果如下:
代码描述
option = {
backgroundColor: '#000',
tooltip: {
trigger: 'item',
formatter: '{b} <br/>{c}: ({d}%)',
},
color: ['#61a0a8', '#d48265', '#23e5fd'],
legend: {
orient: 'vertical',
top: 'center',
left: '60%',
// formatter:'{b}<br/>{c})',
itemGap: 30,
textStyle: {
color: 'white',
fontSize: '20px',
// lineHeight: '50px'
},
icon: 'circle',
itemWidth: 8,
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '70%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color:'#fff',
// text: '1111'
formatter: '{total|2000}\n{active|总面积}',
rich: {
total:{
fontSize: 35,
// fontFamily : "微软雅黑",
color:'#23e5fd'
},
active: {
// fontFamily : "微软雅黑",
fontSize: 16, color:'#fff',
lineHeight:30,
},
}
},
},
labelLine: {
show: false,
},
data: [
{ value: 300, name: '公共区面积' },
{ value: 120, name: '未占用面积' },
{ value: 3180, name: '已占用面积' },
],
},
{
color: ['#61a0a8'],
type: 'pie',
// clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['30%', '50%'],
radius: ['48%', '50%'],
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
}
}]
},
],
}
解决方案:
圈用一个新的饼图实现
文字:在label中,且可以自定义多种文字属性
补充::
用的时候label中无法使用nomal
label: {
show: true,
position: ‘center’,
color:’#fff’,
// text: ‘1111’
formatter: ‘{total|2000}\n{active|总面积}’,
rich: {
total:{
fontSize: 35,
// fontFamily : “微软雅黑”,
color:’#23e5fd’
},
active: {
// fontFamily : “微软雅黑”,
fontSize: 16, color:’#fff’,
lineHeight:30,
},
},