“ 最近在gitee上看到一套不错的大屏模板，看广大朋友的评论，着实不错，就是缺少了后台数据接口部分；本着学习的精神，准备将相关接口开发出来，供大家一起学习和研究”
由于本人个人时间精力有限，无法将所有接口的进行抽取出来提供接口；所以只提供一个平台系统，供大家根据各自的需求进行相关设置和数据的录入。
以下是相关操作部分
1、数据准备
—
导入基本数据
以智慧城市的通用模板为例进行相关操作的说明：
1、本人在系统上创建了2个数据表，各位可根据下图中的excel模板将数据准备好，然后登录系统上进行导入即可，系统的登录账号可联系本人提供
系统表：
导入数据标题
2、数据获取
—
调用接口获取步骤1中导入的数据进行展示
步骤1中已经将数据进行导入，下边编写代码调用接口获取数据进行展示
1、获取标题数据
//定义接受属性的参数，这里以标题和左边图表1，2为例var title =null;//大标题var left1_title=null;//左一图表标题var left2_title=null;//左二图表标题var left1_field=new Array();//左一图表属性var left2_field=new Array();//左二图表属性字段var left1_field_data=new Array();//左一图表属性值var left2_field_data=new Array();//左二图表属性值
//发送ajax请求获取标题数据var url = "http://qxsdcloud.com:18082/cmds/api";var params = {"ApiCode":"zhcs_tymb_bt", "param":"{'yijifenlei':'智慧城市','erjifenlei':'通用模板展示'}"};$.ajax({url:url,data:JSON.stringify(params),type:"post",success:function (resultData) {//成功后的回调函数if(resultData.resultCode=='200'){var i =resultData.rows.length;var id=null;for(var j=0;j<i;j++){var value=resultData.rows[j].ziduanmingcheng;//值var text=resultData.rows[j].beizhu1;//大标题、左一标题。。。var text2=resultData.rows[j].beizhu2;//字段属性、标题if(text=='大标题' ){title=value;id="title";document.getElementById(id).innerHTML=value;}else if(text=='左一标题' ){left1_title=value;id="left1_title";document.getElementById(id).innerHTML=value;}else if(text=='左二标题' ){left2_title=value;id="left2_title";document.getElementById(id).innerHTML=value;}}console.log(resultData);}},dataType:"json",contentType: 'application/json;charset=UTF-8'});
//获取图表数据var params = {"ApiCode":"zhcs_tymb_bt2", "param":"{'yijifenlei':'智慧城市','erjifenlei':'通用模板展示'}"};$.ajax({url:url,data:JSON.stringify(params),type:"post",success:function (resultData) {//成功后的回调函数if(resultData.resultCode=='200'){var i =resultData.rows.length;var id=null;for(var j=0;j<i;j++){var text=resultData.rows[j].beizhu1;//图表类型位置var filed=resultData.rows[j].shuxing;//属性var value=resultData.rows[j].num;//值if(text=='左一图表' ){left1_field.push(filed);left1_field_data.push(value);}else if(text=='左二图表' ){left2_field.push(filed);left2_field_data.push(value);}}echarts_1();echarts_2();console.log(left1_field);console.log(left1_field_data);}},dataType:"json",contentType: 'application/json;charset=UTF-8'});
最终展示的效果图如下红框中内容：
持续更新中~
还请点赞+关注，不然可能找不到我了哦
原文作者：小南瓜开发平台；如有侵权，请联系管理员删除。
上一篇：
大屏数据展示模板-智慧城市
下一篇：
linux系列~linux高级命令
请登录后发表评论
登录
全部评论
