博客

1.前言

以前我对二维数组的使用非常少，有时候也想不到用二维数组，直到今天遇到一个问题，才想到用二维数组确实是比较好的解决方式，正好给大家简单分享一下。

2.需求

先放一张做好的网页吧。

image.png

从图中也能看出来，就是统计一下四个小区的用户入住情况，目前拿到的数据只有四个小区，以后可能还会加新的小区，可能放在以前，直接查询四次，生成四个图表就行了，要是又来新的数据了，那就还需要重新在写一遍，所以对以后的系统数据更新是非常不友好的，那么我所想到的解决方案就是，只需要执行一次查询，把所有的小区名字，以及住户都查询出来，放到一个数组里，遍历数组，直接一下子把不同小区的图表都生成出来。这样以后来新的数据了，代码基本不用修改。只需要添加数据就行。简单看一段代码吧。

   // 基于准备好的dom，初始化echarts实例
        var chart1_1 = new Array();   //二维数组，用来存储小区名字，楼栋号，住户数，以及未居住数。
        var xiaoqu = [];
        $.ajax({
            url: "../handler/GetDataHandler.ashx",
            type: "post",
            async: false,
            data: { "flag": "GetChat1_1" },
            success: function (data) {
                var _data = eval("(" + data + ")");
                for (var i = 0; i < _data.length; i++) {
                    if (xiaoqu.indexOf(_data[i]["所属小区"]) < 0) {  //把不重复的四个小区添加到数组中
                        xiaoqu.push(_data[i]["所属小区"])
                    }
                    chart1_1[i] = new Array();        //声明二维数组 [["美之国","35#","45",'15'],[,,,]]
                    for (var j = 0; j < 4; j++) {
                        switch (j) {
                            case 0:
                                chart1_1[i][j] = _data[i]["所属小区"];
                                break;
                            case 1:
                                chart1_1[i][j] = _data[i]["楼栋号"];
                                break;
                            case 2:
                                chart1_1[i][j] = _data[i]["住户数"];
                                break;
                        }
                    }
                }
            }
        })

首先定义了一个数组

xiaoqu

用来存储不同的小区。然后定义一个二维数组chart1_1，用来存储查询出来的数据，数据能查询出来了，然后就是先找到小区的个数，然后从chart1_1中对比小区名字，在取出数组中的数据，生成对应的图表就行了。思路理清楚了，做起来确实还是比较简单的。

Study hard and make progress every day.

更多学习资料请关注”爱游戏爱编程”。

爱游戏爱编程.jpg