一般用echarts画图的时候,都是从数据库查询出数据信息放在echarts的data数组里面,但是有的时候查询出来的数据为空,那图就会不显示Y轴;
为了解决Y轴不显示的问题,下面的这种方法就是在后台先把前台传来的时间段,分为一个小时间隔的map,先初始化每个小时数据为0,然后再把数据库查出来的按时间分组的数据set进去,这样无论有没有查出数据,都会有个初始值0,Y轴也能正常显示:
//因为设置为一个小时的间隔,所以时间格式化为“HH:00:00”,如果要设为一分钟,可改为“HH:mm:00”,以此类推
DateTimeFormatter df = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:00:00");
LocalDateTime st = startTime.toLocalDateTime(); //startTime是从前台拿到的起始时间,为时间戳格式
LocalDateTime et = endTime.toLocalDateTime(); //endTime是从前台拿到的结束时间,为时间戳格式
//设置增加的步长为一小时
long step = 1;
//用来装每小时的数据,map的key唯一,不会设置重复的数据
Map<String, Integer> map = new HashMap<String, Integer>();
//用data来存放最终的图数据,为二维数组
List<List<Object>> data = new ArrayList<>();
int i = 0;
while(st.isBefore(et)) {
List<Object> t = new ArrayList<>();
st = st.plusHours(step);
t.add(df.format(st));
t.add("0");
data.add(t);
map.put(df.format(st), i);
i++;
}
//此处callLog为后台传来的数据,数组转为list列表,如果你的已经为list,可以不转换
List<CallLog> datalist = new ArrayList<>();
if(null != callLog) {
datalist = Arrays.asList(callLog);
}
for(CallLog log : datalist) {
String c = df.format(log.getCreateTime().toLocalDateTime());
if(map.containsKey(c)) { //如果map存在该时间刻度,则重新用data.set设置value,覆盖原来的0
List <Object> list = new ArrayList<>();
list.add(log.getCreateTime().getTime()); //时间(为图的X轴)
list.add(log.getRemarks()); //统计的数量(为图的Y轴)
data.set(map.get(c), list);
}
}
前端用数组接收该list:
var echarts_1Data = []; //定义一个数组
echarts_1Data = response.getParameter("data");
$.request({
url: $$pageContextPath + 'xx/xxx/getxxByDate',
params: {
'startTime': getDate(startTime),
'endTime': getDate(endTime),
},
success: function(response) {
var datalist = response.getParameter("data");
echarts_1Data = datalist;
_this.echarts_2(); //重新画图
}
});