利用Echarts+Springboot实现数据可视化数据可视化 Spring实现简单的数据可视化自定义可视化图表

最近在做大数据项目，先做了个数据可视化。

简单来说就是：

利用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  题外话：如果加入此条注解，下面返回的内容就会被加入响应体中，页面显示：chartspublic 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就可以做出来各种可视化图表啦（撒花撒花撒花）~~~

（写得不好，欢迎大佬指教）