echarts官网上面的模板讲的非常详细，但都只是给定的数据出来的效果，而在实际的开发中当然需要获取后台真正的数据，这是一个统计一天中每个小时的在线人数的折线统计图：
（图来自测试阶段数据不是很全，横轴应该是0-24点）
下面上代码：
jsp页面：
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/5/17
Time: 15:25
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/js/comom.jsp" %>
<html>
<head>
<meta charset="utf-8">
<title>在线人数统计图</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="<%=path%>/static/js/echarts.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/datePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
//文档就绪函数
$(function(){
//发起ajax请求
$("#but").click(function(){
var day = $("#day").val();
$.ajax(
{
url:'<%=path%>/Online.do',
type:'post',
data:{intimeString:day},//{"day":day.val()},
dataType:'json',
success:function(result){
var hour = result.hour;
var hourCount = result.hourCount;
var option = {
title: {
text: '在线人数统计图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['在线人数']
},
grid: {
left: '0.3%',
right: '0.2%',
bottom: '0.5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: hour
},
yAxis: {
type: 'value'
},
series: [
{
name: '在线人数',
type:'line',
stack: '总量',
data:hourCount
},
]
};
myChart.hideLoading();
myChart.setOption(option);
myChart.hideLoading();
},
error:function(){
alert("图表请求数据失败!");
}
}
);
});
});
</script>
</head>
<body>
<% request.setCharacterEncoding("UTF-8");%>
<div align="center">
指定查询日期：
<input readonly="true" name="day" id="day" class="Wdate" type="text" onClick="WdatePicker()">
<input type="button" value="提交" id="but"/>
</div>
<%-- 指定查询日期：<input type="text" name="day" id="day"/>
<label id="dayInfo"></label><p>--%>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
/*var option = {
title: {
text: '在线人数统计图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['在线人数']
},
grid: {
left: '0.3%',
right: '0.2%',
bottom: '0.5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: hour
},
yAxis: {
type: 'value'
},
series: [
{
name: '在线人数',
type:'line',
stack: '总量',
data:hourCount
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);*/
</script>
</body>
</html>
controller：
package com.ccdt.bds.controller;
import com.ccdt.bds.service.OnlineService;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.google.gson.Gson;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletResponse;
import java.text.SimpleDateFormat;
import java.util.*;
/**
* @Author:
* @Date:2018/5/18 14:03
*/
@Controller
public class OnlineController {
@Autowired
private OnlineService onlineService;
private Gson gson = new Gson();
@RequestMapping(value="/Online",method = RequestMethod.POST)
@ResponseBody
public String getData(String intimeString, HttpServletResponse response) throws Exception {
// String intimeString = request.getParameter("day");
try{
// ObjectMapper result = new ObjectMapper();
List<Map<String, Integer>> ss = onlineService.selectCount(intimeString);
Map<String,List<Object>> resultMap = new HashMap<>();
List<Object> hourList = new ArrayList<>();
List<Object> countList = new ArrayList<>();
for (int i=0;i < ss.size(); i++){
Map<String, Integer> map = ss.get(i);
String hour = map.get("hour")+":00";
String countStr = map.get("count")+"";
if(countStr.indexOf(".") != -1){
countStr = countStr.substring(0,countStr.indexOf("."));
}
Integer count = Integer.parseInt(countStr);
hourList.add(hour);
countList.add(count);
}
resultMap.put("hour",hourList);
resultMap.put("hourCount",countList);
return gson.toJson(resultMap);
}catch (Exception e){
e.printStackTrace();
return "err";
}
}
@RequestMapping(value="/online")
public String onlineChart(){
return "online";
}
/*public void checkInput(@RequestParam("day") String day, HttpServletResponse response){
String result = "success";
try {
response.getWriter().write(result);
} catch (IOException e) {
e.printStackTrace();
}
}
@RequestMapping(value="Online")
public String Online (){
return "views/online";
}
@RequestMapping(value = "/getData")
@ResponseBody
public String getData(){
int count = 0;
try {
count = onlineService.selectCount();
} catch (Exception e) {
e.printStackTrace();
}
try {
onlineService.getData();
} catch (Exception e) {
e.printStackTrace();
}
return getData();
}
*/
}
service：
package com.ccdt.bds.service.impl;
import com.ccdt.bds.dao.OnlineMapper;
import com.ccdt.bds.service.OnlineService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Map;
/**
* @Author:
* @Date:2018/5/17 13:49
*/
@Service
public class OnlineServiceImpl implements OnlineService {
@Autowired
private OnlineMapper onlineMapper;
@Override
public List<Map<String, Integer>> selectCount(String dayStr) throws ParseException {
String dayStrMin = dayStr+" 00:00:00";
String endDayStr = dayStr + " 23:59:59";
SimpleDateFormat sd = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date day = sd.parse(dayStrMin);
Date dayEnd = sd.parse(endDayStr);
return this.onlineMapper.selectCount(day,dayEnd);
}
/*public Online getData() throws Exception {
List<Online> countList = new ArrayList<Online>();
Online online = new Online();
if (rs != null){
List<String> hour = new ArrayList<>();
List<Integer> hourCount = new ArrayList<>();
while (rs.next()){
hourCount.add(rs.getInt("cnt"));
hour.add(rs.getString("hours")+"ʱ");
// online.setId(rs.getInt("id"));
// online.put("cnt",);
// online.put("hours",rs.getInt("hours"));
}
online.setHour(hour);
online.setHourCount(hourCount);
}
return online;
}
*/
}
package com.ccdt.bds.dao;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Component;
import java.util.Date;
import java.util.List;
import java.util.Map;
/**
* @Author:
* @Date:2018/5/18 16:59
*/
@Component("onlineMapper")
public interface OnlineMapper {
List<Map<String, Integer>> selectCount(@Param("day") Date day, @Param("dayEnd") Date dayEnd);
}
mapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.ccdt.bds.dao.OnlineMapper" >
<resultMap id="BaseResultMap" type="com.ccdt.bds.model.Online" >
<id column="id" property="id" jdbcType="INTEGER" />
<result column="time" property="time" jdbcType="TIMESTAMP" />
<result column="count" property="count" jdbcType="VARCHAR" />
<result column="hour" property="hour" jdbcType="VARCHAR" />
<result column="count" property="hourCount" jdbcType="INTEGER" />
<result column="day" property="day" jdbcType="DATE" />
<result column="dayEnd" property="dayEnd" jdbcType="DATE" />
</resultMap>
<select id="selectCount" resultType="java.util.Map" parameterType="java.util.Date">
SELECT HOUR(e.time) as hour,sum(e.count) as count
FROM bds_online_stb e
WHERE
e.time >= #{day,jdbcType=TIMESTAMP} and
e.time <= #{dayEnd,jdbcType=TIMESTAMP}
GROUP BY HOUR(e.time)
ORDER BY Hour(e.time);
</select>
</mapper>