Spring Boot2.x版本使用ECharts动态绘制按时间段显示统计数据

代码探险家_cool

已于 2024-04-24 10:32:34 修改

阅读量1.5k

点赞数 2

分类专栏： springboot 前端文章标签： Spring Boot ECharts ECharts时间段统计

于 2020-08-18 10:01:20 首次发布

本文链接：https://blog.csdn.net/C_AJing/article/details/108069820

版权

springboot 同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

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/，可以看到如下页面：

在这里插入图片描述输入相应的开始时间，结束时间和时间间隔：

在这里插入图片描述
点击生成图表按钮，则可生成对应的折线统计图：

在这里插入图片描述
这里的数据是使用随机数模拟的，看一下原始数据：

在这里插入图片描述
这只是一个小案例，想要学习更多，可以去ECharts 官网。

代码探险家_cool

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
Spring Boot2.x版本使用ECharts动态绘制按时间段显示统计数据

ECharts简介：ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html接下来，创建一个Spring Boot项目，使用ECharts实现按指定时间段和时间间隔内显示统计数据的
复制链接

扫一扫