如下图所示,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}
{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 } } } } ] } }
你现在不是已经在formatter里处理好了吗? 只要他的dataTwo与dataThree的数据下标相对应就可以了。
formatter: function(name) { var index = 0; data.dataTwo.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + data.dataThree[index] + "个"; }