当前效果:鼠标移到饼图item上时,value和百分比显示在饼图上。
期望效果:鼠标移到饼图item上时,value和百分比显示在饼图的中心(center),鼠标移出饼图时,显示截图所示样子(饼图里面显示SABCD)
在normal.position = ‘inner’, emphasis.position = 'center'。我是这样设置的,当时效果没达到预期
配置项如下
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function(point, params, dom, rect, size) {
var boxWidth = size.contentSize[0]
var boxHeight = size.contentSize[1]
var viewWidth = size.viewSize[0]
var viewHeight = size.viewSize[1]
var posX = 0
var posY = 0
posX = (viewWidth - boxWidth)/2
posY = (viewHeight - boxHeight)/2
return [posX, posY]
},
},
// legend: {
// orient: 'vertical',
// x: 'left',
// data: ['S', 'A', 'B', 'C', 'D']
// },
series: [
{
name: '等级',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inner',
textStyle: {
fontSize: '14',
fontWeight: '500'
}
},
emphasis: {
show: true,
position: 'center',
textStyle: {
fontSize: '20',
fontWeight: '500'
},
formatter: function (params) {
return params['percent'] + '%\n' + params.value
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 100, name: 'S'},
{value: 200, name: 'A'},
{value: 220, name: 'B'},
{value: 280, name: 'C'},
{value: 400, name: 'D'}
]
}
]
};