数据可视化大屏根据筛选条件查询互动展示的常见方式就是，$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！
