实现点击地图上的点数据可视化图表实时变动

    在数据可视化小组作业中，我们的项目是美国纽自行车交易数量可视化展示，其中需要通过点击地图上的交易点获取名字，然后传入获取交易数量的ajax请求中，来实现通过图表展示数据。

      我们采用的是Echarts可视化图表库，下面的这部分代码是在绘制地图的ajax函数中设置点击事件，获取到name，传入三个ajax，即为ajax套用ajax，将ajax请求来的name传入其他的ajax中，实现每次请求后点击都会实时获取。
      第一个ajax是绘制每小时借车数统计图与每小时还车数统计图，因为两个数据都来源于一个数据接口，第二个ajax是绘制每小时交易数量统计图，第三个ajax是绘制右边起始点与终点的表。

 app.on('click', function (params) {
        if (params.componentType === 'series') {
            // alert(params.data.name);
            var name = escape(params.data.name);
            ajax1(name);
            ajax2(name);
            ajax3(name);
        }
    });

      三个ajax的形式均相同，不同的是api接口的url，传入name变量到url中，实现点击实时变化不同站点的数据。

function ajax1(name) {
    $.ajax({
        url: 'http://127.0.0.1:8000/api/station/analyze/hour?station_name=' + name,
        type: 'GET',
        dataType: 'JSON',
        success: function (result) {
            init2(result)
        }
    })
}

      下面是分解数据的代码和实现的效果图，点击地图上不同的点即可传入不同的name，左侧是数据会实时变动，左侧的图根据echarts绘制，将获取的数据提取存入数组，然后再echarts图表中填入对应的数据，先将图表init到对应的页面容器中。

    var in_bike = echarts.init(document.getElementById('in_bike'));
    var out_bike = echarts.init(document.getElementById('out_bike'));
    var hours = [];
    var in_bikenums = [];
    var out_bikenums = [];
    for (var i = 0; i < 24; i++) {
        hours.push(data.in_bike[i].hour);
        in_bikenums.push(data.in_bike[i].nums);
        out_bikenums.push(data.out[i].nums);
    }

      这里还有一点需要注意的是，ajax的代码可以拆分写，不必所有的处理函数都写success里面，可以单独定义函数，将ajax请求会的result传去init函数中，init函数在定义时也传入一个形参。