ECharts简介：ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
接下来，创建一个Spring Boot项目，使用ECharts实现按指定时间段和时间间隔内显示统计数据的demo。
- 创建一个Spring Boot项目，项目结构如下：
- 导入Spring Boot的web相关maven依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>- 创建echarts.html文件，具体实现内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn-echarts</title>
</head>
<!--引入jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<body>
<div>
开始时间：<input id="startTime" type="time">
结束时间：<input id="endTime" type="time">
时间间隔：<input id="timeInterval" type="text" placeholder="整数(分钟)">
<button onclick="produceEcharts()">生成图表</button>
</div>
<div id="echartsDiv" style="width: 900px;height:400px;margin-top: 20px;">
</div>
</body>
<script>
/**
*生成echarts图表
*/
function produceEcharts() {
// 获取开始时间
let startTimeStr = $("#startTime").val();
//获取结束时间
let endTimeStr = $("#endTime").val();
//获取时间间隔
let timeIntervalStr = $("#timeInterval").val();
//这里只做了简单验证
if (!startTimeStr || !endTimeStr || !timeIntervalStr) {
return;
}
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById("echartsDiv"));
myChart.showLoading(); // 开启 loading 效果
//获取时间间隔数组
let timeIntervalArr = getTimeInterArr(startTimeStr, endTimeStr, timeIntervalStr);
// 获取X轴数组
let xAxisArr = getXAxis(timeIntervalArr);
//获取数据（Y轴）
let countData = getData(xAxisArr);
myChart.hideLoading(); // 隐藏 loading 效果
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data: ['人数']
},
xAxis: {
data: xAxisArr,
axisLabel: {
interval: 0,// 横轴信息全部显示
rotate: 30
}
},
yAxis: {},
series: [{
name: '人数',
type: 'bar',
data: countData
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/**
* 获取时间间隔数组
*
* @param startTimeStr 开始时间
* @param endTimeStr 结束时间
* @param timeIntervalStr 时间间隔
* @returns
*/
function getTimeInterArr(startTimeStr, endTimeStr, timeIntervalStr) {
let timeIntervalArr = [];
timeIntervalArr.push(startTimeStr); //放入开始时间
let time = startTimeStr;
while (true) {
time = time.split(":");
let hTime = parseInt(time[0], 10);
let mTime = (parseInt(time[1]) + parseInt(timeIntervalStr));
if (mTime >= 60) {
hTime = hTime + parseInt(mTime / 60, 10);
mTime = mTime % 60;
}
time = (hTime < 10 ? "0" : '') + hTime + ":" + (mTime < 10 ? "0" : '')
+ mTime;
if (time >= endTimeStr) {
timeIntervalArr.push(endTimeStr);
break;
}
timeIntervalArr.push(time);
}
return timeIntervalArr;
}
/**
* 获取X轴
*
* @param timeIntervaArr
* @returns
*/
function getXAxis(timeIntervaArr) {
let xArr = [];
for (let i = 0; i < timeIntervaArr.length - 1; i++) {
xArr.push(timeIntervaArr[i] + "-" + timeIntervaArr[i + 1]);
}
return xArr;
}
/**
* 获取数据
*
* @param xAxisArr
* @returns
*/
function getData(xAxisArr) {
let resultArr = [];
for (let i = 0; i < xAxisArr.length; i++) {
//生成一个随机数
let num = Math.ceil(Math.random() * 20);
resultArr.push(num);
//输出原始数据
console.log(xAxisArr[i] + ":" + num);
}
return resultArr;
}
</script>
</html>这里为了简便，我还多引入了jquery，并且使用了jquery和ECharts的免费公共cdn，如果用于生产环境，当然是不建议这么做的，这里只用做演示用。
- 创建TestController，将请求路径映射到echarts.html：
@Controller
public class TestController {
@GetMapping("/")
public String echartsIndex() {
return "echarts.html";
}
}5.启动项目，访问http://127.0.0.1:8080/，可以看到如下页面：
输入相应的开始时间，结束时间和时间间隔：
点击生成图表按钮，则可生成对应的折线统计图：
这里的数据是使用随机数模拟的，看一下原始数据：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
