首页 前端知识 后台设置echarts图的每小时数据

后台设置echarts图的每小时数据

2024-04-07 08:04:49 前端知识 前端哥 838 327 我要收藏

一般用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();    //重新画图
					}
			});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4555.html
标签
评论
发布的文章

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!