Springboot构建Echarts数据可视化

GoAI

已于 2022-03-18 15:17:33 修改

阅读量3.6k

点赞数 4

分类专栏： # 大数据项目文章标签：可视化 java spring vue python

于 2020-09-19 08:43:04 首次发布

本文链接：https://blog.csdn.net/qq_36816848/article/details/123570403

版权

大数据项目专栏收录该内容

9 篇文章 31 订阅

订阅专栏

Spring boot集成了tomcat等容器，效率更高，要实现数据的可视化，需要构建spring Boot框架架构web项目。同时使用注意的方式，就可以轻松建立前端访问路径与后端controller方法的映射关系，而不用像servlet一样维护繁琐的xml映射配置表。

Springboot入门学习: Spring入门篇_Spring入门视频教程-慕课网

Springboot官网： Spring Boot

Springboot学习： SpringBoot是什么？SpringBoot的优缺点有哪些？

下面咱看看如何使用工具IDEA利用Spring Boot构建web项目。

1. File > new > Project >进入如下页面：

点击完成后，会自动去下载对应的maven依赖。所以注意，这里需要你提前安装好maven。来看一下我的maven配置：

File > Settings > Build,Execution,Deployment > Build Tools > Maven

-Xms128m -Xmx512m -Duser.language=zh -Dfile.encoding=UTF-8

进入工程后，删除无用的文件mvnw、mvnw.cmd、.mvn文件夹

创建一个Controller：

package com.crn.spark.web;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RestController;

@RestController

public class HelloController {

@RequestMapping(value = "/hello",method = RequestMethod.GET)

public String sayHello(){

return "Spring Boot... Hello World!";

}

启动：

选中WebApplication，鼠标点击右键：

启动日志：

前端访问测试：

http://localhost:8080/hello

访问路径中缺少，项目名称，再丰富一下配置文件：

观察启动日志，port已经发生变化：

再次进行访问测试：

http://localhost:8089/crn/hello

3. 使用Echarts构建静态数据可视化

1.先了解静态数据可视化，然后再学习动态数据可视化。

2.去echarts官网下载js文件，网址： https://www.echartsjs.com/zh/download.html点击在线定制

将下载的文件copy到static/js文件夹下，并记得改一下名称echarts.min.js

3. 构建web项目，如何能够加载页面效果，这里还需要在pom文件中添加一个maven依赖如下：

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

记得重新导入maven依赖，并确认依赖是否导入。

4. 创建html文件

在templates文件夹下创建test.html文件：

5. 参照echarts官方文档http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

(1)引入echarts

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <script src="echarts.min.js"></script> </head> </html>

(2)绘制一个简单图表,可以去官网找个模板。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="echarts.min.js"></script>
</head>
</html>

(2)绘制一个简单图表
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>

6. 编写controller

@RequestMapping(value = "/first",method =RequestMethod.GET)

public ModelAndView firstDemo(){

return new ModelAndView("test");

}

7.访问测试：

http://localhost:8089/crn/first

稍微调整一下图表的位置：

搞定我们自己的静态页面：这是为了实现动态的展现做第一步的准备。

(1) 新创建一个html页面，将报表中对应的内容，改成我们自己的样式代码；

(2) 修改页面中的静态数据，使其能够成功展现；

4. 使用Echarts构建动态数据可视化

学习了Echarts的静态数据可视化之后，咱们再来学习动态数据的可视化。

搞定了静态页面，下面就可以开始实现动态数据的可视化了。

1. 后台准备数据

(0) 首先调整一下咱们的工程目录结构，勾选第二项Compact

使其更规范一些。

(1) 编写操作hbase的工具类；

添加依赖：

<id>cloudera</id>

<url>https://repository.cloudera.com/artifactory/cloudera-repos/</url>

</repository>

<groupId>org.apache.hbase</groupId>

<artifactId>hbase-client</artifactId>

<version>${hbase.version}</version>

</dependency>

(2) 编写用于封装数据的实体类；

(3) 编写封装实体类数据的数据操作代码DAO；

(4)编写controller，调用dao将数据返回到前端页面；直接以List列表的方式返回；

a. 返回json数据的格式，所以还需要添加一个maven依赖：

b. 由于后端查询到的只是一个courseId，所以还需要进行一下转换。实际应用中id和name的对应关系肯定是配置在数据库中，咱这里为了简单就直接写成一个静态的代码块，写死在代码中。

(5)编写一个controller的方法，用于实现页面跳转；

(6)在页面中引入jQuery，异步调用ajax对后端数据进行请求：

通过上面的步骤，咱们可以实现统计每天实战课程的访问量，同理按照这个套路可以实现统计来自不同搜索引擎的课程访问量。

注意上面的流程中，已经包含了一个Spring boot集成使用echarts插件的完整流程了。在这里重新再梳理一下。

1. 使用idea构建一个maven管理的web项目；

2. 在pom文件中添加解析html的依赖；

3. 在templates文件夹中创建一个test.html;

4. 参考echarts官方说明流程：下载js，保存到resources目录下 > 在test.html中引入对应的js > 按照说明复制body中内容；

5. 编写controller代码，使用modeandview对应跳转访问html页面；测试是否能够成功访问；

6.测试通过后，进入echarts官网选择自己想要展示样式，将option代码复制；

7. 在后端controller中准备数据，在页面中动态访问实现数据的动态展示。

打包之后部署服务器：

使用阿里云DataV实现数据可视化

对于实现数据的可视化，不同的公司可能会有不同的方案。这里咱就为了适配不同的背景，再来学习一种很流行的可视化方案，那就是阿里云的DataV.

DataV功能说明：

1)点击量分省排名、运营商访问占比

通过IP解析到省份，城市，运营商 --> 这个在Spark SQL项目实战课程中有讲解

2) 浏览器访问占比、操作系统占比

通过解析userAgent -->这个在hadoop项目中有讲解

DataV实现数据可视化的流程：

资源准备：

(1) 一个公网能够访问的mysql数据库(DataV暂不支持hbase)

(2)DataV都是付费的，需要购买才能使用

流程：

1. 选择模板；调整文字时，都是带有样式操作界面的，可以很方便的进行调整；

2. 编写sql，查询数据库，实现动态展示。

对！流程就是这个简单！

GoAI

关注

4
点赞
踩
38

收藏

觉得还不错? 一键收藏
打赏
1
评论
Springboot构建Echarts数据可视化

Spring boot集成了tomcat等容器，效率更高，要实现数据的可视化，需要构建spring Boot框架架构web项目。同时使用注意的方式，就可以轻松建立前端访问路径与后端controller方法的映射关系，而不用像servlet一样维护繁琐的xml映射配置表。Spring Boot构建web项目，也可以学习mooc网课程。S...
复制链接

扫一扫