如下图所示,legend的右边都有对应的数字,而legend的name和value都是后台动态生成的且以数组的形式发送过来,若是固定的name我是实现了,但是动态的我却怎么也显示不了legend右边的数字,以下是我的demo代码,我要实现的效果就是下图中legend的样式:name和value始终对应。请大神指点!
显示的效果:
代码:
后台传过来的data :
{"dataTwo":["首页","提现页"],
"dataThree":[128,85],
}
option函数:
function userplace(data) {
return {
title: {
text: ''
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
right: '7%',
bottom: '13%',
data: data.dataTwo,
formatter: function () {
var array = [];
var len = data.dataTwo.length;
for (var i = 0; i < len; i++) {
var map = {};
map.name = data.dataTwo[i];
map.value = data.dataThree[i];
array[i] = map.name+" "+map.value+"个";
}
console.log(array,1789)
return array;
}
},
grid: {
top: '1%',
left: '10%',
right: '10%',
bottom: '20%',
containLabel: true
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '85%',
center: ['35%', '50%'],
data: (function () {
var array = [];
var len = data.dataTwo.length;
console.log(len, 122)
for (var i = 0; i < len; i++) {
var map = {};
map.name = data.dataTwo[i];
map.value = data.dataThree[i];
array[i] = map;
}
return array;
}()
),
itemStyle: {
normal: {
label: {
position: 'inner',
formatter: function (params) {
return (params.percent - 0).toFixed(0) + '%'
}
},
labelLine: {
show: false
}
}
}
}
]
}
}