最近在做大数据项目,先做了个数据可视化。
简单来说就是:
利用Echarts + Springboot实现数据可视化
Echarts:调用Echarts.js的API实现图标数据展示 (echarts网址)
https://echarts.apache.org/zh/index.html
Springboot:编写接口访问 (目录结构如下)
pom文件:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.chen.cn</groupId>
<artifactId>springbootchartview</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<mysql-connector-java.version>5.1.38</mysql-connector-java.version>
<druid.version>1.1.6</druid.version>
</properties>
<!--继承父工程的starter-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.4.RELEASE</version>
</parent>
<dependencies>
<!--springboot应用支持springmvc功能-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mysql driver -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql-connector-java.version}</version>
</dependency>
<!--数据源连接池-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>${druid.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--视图组件:thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.14</version>
</dependency>
</dependencies>
</project>
编写控制层:
package com.chen.cn.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class EchartsController{
@RequestMapping("/doCharts")
// @ResponseBody 题外话:如果加入此条注解,下面返回的内容就会被加入响应体中,页面显示:charts
public String doCharts(ModelMap modelMap){
return "charts"; //请求转发到charts页面
}
}
然后是charts.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="/js/echarts.js"></script>
</head>
</html>
绘制一个简单的图标:
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head>
之后,添加:
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
最后:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" th:inline="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>
</html>
其中:
1、'bar' 是图标类型
2、我们可以通过这里修改图表的大小:
编写完成,开始跑程序,点击运行,访问:
http://localhost:8080/doCharts
即可得到可视化图表:
我们更可以修改图表类型,只需修改一个参数即可(type,pie为饼图):
series: [
{
name: '销量',
type: 'pie',
data: JSON.parse(data2)
}
]
运行效果:
当然这里的数据是写死的,那我们肯定要写我们自己的东西呀!!所以怎样?
请往下看:
我们需要改写controller,charts.html这两个地方。
1、在controller中加入以下代码:
package com.chen.cn.controller;
import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.List;
@Controller
public class EchartsController{
@RequestMapping("/doCharts")
public String doCharts(ModelMap modelMap){
//定义商品名称
List<String> data1 = new ArrayList<>();
data1.add("手机");
data1.add("电脑");
data1.add("平板");
data1.add("耳机");
data1.add("电视");
data1.add("洗衣机");
data1.add("拖孩");
List<Integer> data2 = new ArrayList<>();
data2.add(2531);
data2.add(1231);
data2.add(525);
data2.add(211);
data2.add(913);
data2.add(821);
data2.add(1121);
//把数据转换为JSON格式
String data1Json = JSON.toJSONString(data1);
String data2Json = JSON.toJSONString(data2);
//将数据转发为视图组件显示
modelMap.put("data1Json",data1Json);
modelMap.put("data2Json",data2Json);
return "charts";
}
}
其中我们需要:
1、传入一个参数:ModelMap
2、把数据转换为JSON格式,再转发为视图组件
2、charts.html编写:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" th:inline="javascript">
//在js读取thymeleaf变量值
var data1=[[${data1Json}]];
var data2=[[${data2Json}]];
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: JSON.parse(data1)
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: JSON.parse(data2)
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
其中:我们使用了 JSON.parse() 方法将Json数据转换为 JavaScript 对象。
再次访问:
http://localhost:8080/doCharts
运行结果如下:
emmm就是感觉好方便,利用一个echarts就可以做出来各种可视化图表啦(撒花撒花撒花)~~~
(写得不好,欢迎大佬指教)