做驾驶舱时,使用到空心饼图中间显示自定义内容,两种方式实现
1. title 进行定位(效果差点)
2. graphic
查询 api后,最为符合的使用 graphic
代码如下,完美实现上图效果
{
tooltip: {
trigger: 'item'
},
legend: {
bottom: '5%',
textStyle: {
color: '#fff'
},
left: 'center'
},
// 设置环形中间的数据
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: '45%',
z: 2,
zlevel: 100,
style: {
text: '29887',
font: '32px Microsoft YaHei',
fill: '#fff'
}
},
{
type: 'text',
left: 'center',
top: '53%',
z: 2,
zlevel: 100,
style: {
text: '今日总供水量',
fill: '#D1D5DD',
font: '14px Microsoft YaHei'
}
},
{
type: 'text',
left: 'center',
top: '58%',
z: 2,
zlevel: 100,
style: {
text: '(/吨)',
fill: '#D1D5DD'
}
}
]
},
series: [
{
name: '今日供水',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
formatter (param) {
// correct the percentage
return param.name + ' (' + param.percent * 2 + '%)'
},
shadowBlur: 0
},
labelLine: {
show: true
},
data: [
{ value: 1048, name: '一水厂' },
{ value: 735, name: '二水厂' }
]
}
]
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)