Echarts实战案例代码(14)：数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路

数据可视化大屏根据筛选条件查询互动展示的常见方式就是，$ajax，通过改变data{}中的传递参数，进而实现数据的异步更新。

创建函数

创建一个包含参数的全部数据的函数getAllData(township)，内部调用需要异步更新数据的子参数，如 getNation(township)，getIncome(township)……

//获取陵城区全部数据;
function getAllData(township) {
    //汇总统计;
    $("#townName").html(township);
    /*05.民族*/
    getNation(township);

    /*06.是否转移*/
    getTransfer(township);

    /*07.月收入*/
    getIncome(township);

    /*08.技能分布*/
    getSkills(township);

    /*09.就业分布*/
    getIndustry(township);

    /*10.年龄统计*/
    getAges(township);
}

ajax获取数据

使用ajax获取数据，同时返回数据是，直接进行图表渲染 getHBar(dataName, dataList, color, id, attri)；

function getIncome(township) {
    $.ajax({
        type: 'post',
        async: false,
        data: {township: township},
        url: './api/api.php?act=getIncome&token=3cab7ce4142608c0f40c785b5ab5ca24',
        dataType: "json",
        success: function (res) {
            var dataName = ['无', '1000-2000元', '2000-3000元', '3000-5000元', '5000-8000元', '8000-12000元', '12000元以上'];
            var color = ['#399bff'];
            var attri = ['月收入'];
            var id = "income";

            var dataList = [
                {name: dataName[0], value: res.data[0].income0},
                {name: dataName[1], value: res.data[0].income1},
                {name: dataName[2], value: res.data[0].income2},
                {name: dataName[3], value: res.data[0].income3},
                {name: dataName[4], value: res.data[0].income4},
                {name: dataName[5], value: res.data[0].income5},
                {name: dataName[6], value: res.data[0].income6},
            ]

            //执行渲染函数;
            getHBar(dataName, dataList, color, id, attri)

        },
        error: function (err) {
            console.log(err + "请求数据失败!");
        }
    });
}

Echarts渲染图表函数

Done！