javascript - echarts中饼形图的legend的问题

问题描述

问 题

如下图所示，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
                        }
                    }
                }
            }
        ]
    }
}

解决方案

formatter: function(name) {
                var index = 0;
                data.dataTwo.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "    " + data.dataThree[index] + "个";
            }

这篇关于javascript - echarts中饼形图的legend的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！