可以通过这个 getSeries() 这个api获取series中的数据，另外可以使用legend foramtter对图例中name进行自定义
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
formatter: function(name) { // legend中的formatter传入一个name属性
var data = this.getSeries()[0].data; // 获取series中的data
var totalValue = data.reduce((acc, item) => { // 计算data中总数
acc += item.value;
return acc;
}, 0)
var targetValue; // 对应图例的值
data.map(item => {
if (item.name == name) {
targetValue = item.value; // 对相应的图例赋值
}
})
var p = (targetValue / totalValue * 100).toFixed(2); // 百分比
return name + ' ' + p + '%';
},
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : ['50%', '70%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
最终效果， 红色部分为添加的百分比效果
legend formatter.png
示例可以使用:
