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

简介: 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!

相关文章
|
7天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
72 2
|
7天前
|
数据可视化 JavaScript 前端开发
基于Echarts构建停车场数据可视化大屏
基于Echarts构建停车场数据可视化大屏
100 0
|
6天前
|
存储 数据可视化 前端开发
Echarts+vue+java+mysql实现数据可视化
Echarts+vue+java+mysql实现数据可视化
|
7天前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
7天前
|
存储 数据可视化 JavaScript
基于Echarts构建大数据招聘岗位数据可视化大屏
基于Echarts构建大数据招聘岗位数据可视化大屏
114 0
|
7天前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
7天前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
7天前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
30 0
|
7天前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
7天前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
24 0