Springboot构建Echarts数据可视化

GoAI

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

阅读量3.9k

点赞数 5

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

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

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

版权

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

10 篇文章 45 订阅

订阅专栏

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]
}]
};