数据可视化中javascript二维数组使用arr.slice实现换行换列排名的解决方案

数据可视化大屏中，常常使用到区域排名的情况，通常的多行同列名的容易排序输出；但是多行多同名列排名怎么解决呢？本案例就是javascript二维数组使用arr.slice实现换行换列排名的解决方案。

演示效果

JS核心代码

/*区县排名*/
function getCounty(user_city) {
    $.ajax({
        type: "get",
        async: true,
        url: "api/api.php?act=getCounty&token=3cab7ce4142608c0f40c785b5ab5ca24",
        data: {user_city: user_city},
        dataType: "json",
        success: function (res) {
            var data = res.data;
            var data1 = data.slice(0, 10);
            var data2 = data.slice(10, 20);
            if (data) {
                var platHtml1 = '', platHtml2 = '';
                for (var i = 0; i < data1.length; i++) {
                    platHtml1 += "<li><span>"
                        + limitWords(data1[i].user_area, 3) + "</span><span>"
                        + data1[i].total + "</span><span>" + (i + 1) + "</span></li>";
                }

                for (var j = 0; j < data2.length; j++) {
                    platHtml2 += "<li><span>"
                        + limitWords(data2[j].user_area, 3) + "</span><span>"
                        + data2[j].total + "</span><span>" + (j + 11) + "</span></li>";

                }
            }
            /*渲染数据*/
            $("#ranking1").html(platHtml1);
            $("#ranking2").html(platHtml2);
        },
        error: function () {
            console.log("全省人员饼图：API INTERFACE ERROR");
        }
    });
}

代码解析

• 统一API接口，一次性读取后台数据；
• 使用data.slice(0, 10)，实现数据分组截取；
• 循环输入HTML；
• $(“#ranking1”).html(platHtml1)，前端渲染；

@lockdata.cn