最近在做大数据项目，先做了个数据可视化。
简单来说就是：
利用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就可以做出来各种可视化图表啦（撒花撒花撒花）~~~
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45437533/article/details/121562409
文章
10.52W+人气
19粉丝
1关注
更多数字孪生可视化干货内容
扫一扫关注公众号
扫一扫联系客服
©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 
浙公网安备33011002011932号
互联网信息服务业务 合字B2-20220090
