使用echarts报表转换显示数据库中已有数据

Masion · 发表于 2016-11-14 16:10:35

首先看展示效果：

利用echarts的直方堆积图展示某港口车辆入港次数（按日期展示）

总体思路如下：

1、让用户选择统计的日期区间和车辆牌号，将这两个参数传回java后台

2、利用sql的pivot功能将基础数据转换为符合echart要求的结果集

3、将结果集返回前台，配置echarts的option参数，启动渲染图表。

Masion · 发表于 2016-11-14 16:31:08

1、让用户选择统计的日期区间和车辆牌号，将这两个参数传回java后台，返回后将结果集加载到普通的数据组件中

var tempCarNumData = this.comp("tempData");
var carNums = tempCarNumData.val("carNums").split(",");
var options = {};
var optionData = this.comp("optionData");
var param = new biz.Request.ActionParam();
var list = new biz.Request.ListParam();
//拿到用户指定的车牌号
carNums.forEach(function(obj) {
list.add(obj);
});
// 拿到用户指定的日期
var dateList = new biz.Request.ListParam();
var startDate = new Date(this.comp("input1").val());
var endDate = new Date(this.comp("input2").val());
// 计算两个日期的相关天数
var dayNum = justep.Date.diff(startDate, endDate, 'd');
for (i = 0; i <= dayNum; i++) {
dateList.add(justep.Date.toString(startDate, "yyyy-MM-dd"));
startDate = justep.Date.decrease(startDate, -1, 'd');
}
//准备向后台传参，执行查询
param.setList('carNums', list);
param.setList('dataList', dateList);
param.setString('flag', this.flag);
options.contentType = 'application/json';
options.dataType = "json";
options.parameters = param;
options.context = this.getContext();
options.action = "demoAction";
options.callback = function(data) {
//返回符合echarts要求的结果集
if (data.state) {
// 成功
optionData.loadData(data.response, false);
optionData.first();
} else {
// 失败
debugger;
// Request.errorMessage(resultData, "执行失败！", null, null);
}
};
biz.Request.sendBizRequest(options)

复制代码

Masion · 发表于 2016-11-14 16:32:46

2、后台接收到前台传过来的参数后，利用SQL的pivot功能，将基础数据进行统计转换成符合echarts要求的数据形式

static final String model = "/zhongliang/demo/data";
public static Table demo(List<String> carNums, List<String> dataList, String flag) throws Exception {
StringBuffer carNumsSb = new StringBuffer(), dateListSb = new StringBuffer();
// 构造参数List，SQL中的参数是按顺序匹配的
for (int i = 0; i < carNums.size(); i++) {
carNumsSb.append("'").append(carNums.get(i)).append("',");
}
carNumsSb.append("''");
for (String date : dataList) {
dateListSb.append("'").append(date).append("',");
}
dateListSb.append("''");
String sb = "";
// 构造SQL语句
if (flag.equals("1")) // 判断使用哪个SQL语句，flag=1,查询出港次数
sb = "SELECT * FROM(SELECT DPTADMIN.DT_CAR_OUT.CAR_NUM AS CAR_NUM, TO_CHAR (DPTADMIN.DT_CAR_OUT.TIME_G,'YYYY-MM-DD') AS CARDATE FROM DPTADMIN.DT_CAR_OUT "
+ "ORDER BY cardate) PIVOT (count(*) FOR CARDATE IN (" + dateListSb + ")) where car_num in(" + carNumsSb + ") ORDER BY CAR_NUM";
else
// 查询重量
sb = "SELECT * FROM(SELECT DPTADMIN.DT_CAR_OUT.CAR_NUM AS CAR_NUM, TO_CHAR (DPTADMIN.DT_CAR_OUT.TIME_G,'YYYY-MM-DD') AS CARDATE, DPTADMIN.DT_CAR_OUT.GWEIGHT AS GWEIGHT "
+ "FROM DPTADMIN.DT_CAR_OUT ORDER BY cardate) " + "PIVOT (sum(GWEIGHT) FOR CARDATE IN (" + dateListSb + ")) where car_num in(" + carNumsSb + ") ORDER BY CAR_NUM";
//原始表格数据格式
//车牌号载重量入港日期
//车牌号2 重量1 日期1
//车牌号2 重量2 日期2
//车牌1 重量3 日期2
//转换之后的数据格式
//车牌号日期1 日期2 日期3
//车牌1 1 2 0
//车牌2 0 1 0
Map<String, String> sql = new HashMap<String, String>();
sql.put(SQL.DEFAULT_DB_NAME, sb);
// 执行SQL并传入参数
Table table = SQL.select(sql, null, model);
return table;
}

复制代码

Masion · 发表于 2016-11-14 16:34:07

3、汇总统计数据返回前台后，配置echarts需要的数据项
Model.prototype.button1Click = function(event) {
var optionData = this.comp("optionData");
var tempData = this.comp("tempData");// gridSelect1
var gridSelect1 = this.comp("gridSelect1");

this.flag = "1";

//按照用户的选择去加载echarts需要的结果数据集
optionData.refreshData();

//此时结果集已经加载的optionData中了，开始配置echart渲染的参数

//配置数据系列名称
var carNums = justep.Util.isString(tempData.val("carNums")) ? tempData.val("carNums").split(",") : "";

//配置X周的日期序列
var startDate = new Date(this.comp("input1").val());
var endDate = new Date(this.comp("input2").val());
// 计算两个日期的相关天数
var dayNum = justep.Date.diff(startDate, endDate, 'd');

var dateArr = new Array();
var colArr = new Array();

for (i = 0; i <= dayNum; i++) {
dateArr.push(justep.Date.toString(startDate, "yyyy-MM-dd"));
colArr.push("'" + justep.Date.toString(startDate, "yyyy-MM-dd") + "'");
startDate = justep.Date.decrease(startDate, -1, 'd');

}

//配置绘图区的数据
var arr = new Array();

optionData.eachByPeek(function(obj) {
var colName = "";
var data = new Array();
for (i in colArr) {
data[i] = parseInt(obj.row.val(colArr[i]));
}
arr.push({
name : obj.row.val("CAR_NUM"),
type : 'bar',
stack : '总量',
areaStyle : {
normal : {}
},
data : data
});
});

debugger;

option = {
title : {
text : '车辆入港次数堆积图'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : carNums
},
toolbox : {
feature : {
saveAsImage : {}
}
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
xAxis : [ {
type : 'category',
boundaryGap : false,
data : dateArr
} ],
yAxis : [ {
type : 'value'
} ],
series : arr
};

// 使用刚指定的配置项和数据在div元素上开始渲染图表
var myChart = echarts.init(this.getElementByXid("div1"));
myChart.setOption(option);

};

Masion · 发表于 2016-11-14 16:38:22

4、优化：为了减少耦合程度，汇总统计结果返回来后，让echarts只依赖一个数据组件

重写了一下结果集的加载代码：

Model.prototype.button1Click = function(event) {
var optionData = this.comp("optionData");
var tempData = this.comp("tempData");// gridSelect1
var gridSelect1 = this.comp("gridSelect1");
this.flag = "1";
optionData.refreshData();
var carNums = []// justep.Util.isString(tempData.val("carNums")) ?
// tempData.val("carNums").split(",") : "";
var startDate = new Date(this.comp("input1").val());
var endDate = new Date(this.comp("input2").val());
// 计算两个日期的相关天数
var dayNum = justep.Date.diff(startDate, endDate, 'd');
var dateArr = new Array();
var colArr = new Array();
// for (i = 0; i <= dayNum; i++) {
// dateArr.push(justep.Date.toString(startDate, "yyyy-MM-dd"));
// colArr.push("'" + justep.Date.toString(startDate, "yyyy-MM-dd") +
// "'");
// startDate = justep.Date.decrease(startDate, -1, 'd');
//
// }
alias = optionData.userdata.relationAlias.split(',');
for (i = 1; i < alias.length; i++) {
dateArr.push(alias[i].replace(new RegExp(/(')/g), ""));
colArr.push(alias[i]);
}
var arr = new Array();
optionData.eachByPeek(function(obj) {
var colName = "";
carNums.push(obj.row.val("CAR_NUM"));
var data = new Array();
for (i in colArr) {
data[i] = parseInt(obj.row.val(colArr[i]));
}
arr.push({
name : obj.row.val("CAR_NUM"),
type : 'bar',
stack : '总量',
areaStyle : {
normal : {}
},
data : data
});
});
option = {
title : {
text : '车辆入港次数堆积图'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : carNums
},
toolbox : {
feature : {
saveAsImage : {}
}
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
xAxis : [ {
type : 'category',
boundaryGap : false,
data : dateArr
} ],
yAxis : [ {
type : 'value'
} ],
series : arr
};
var myChart = echarts.init(this.getElementByXid("div1"));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
};

复制代码

Masion · 发表于 2016-11-14 17:08:12

		自动登录	找回密码
密码			注册

[分享] 使用echarts报表转换显示数据库中已有数据

评分