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

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

2023-07-19 103

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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 + "请求数据失败!");
        }
    });
}