SpringBoot+ECharts+Html 字符云/词云案例详解

1. 技术点

 SpringBoot、MyBatis、thymeleaf、MySQL、ECharts 等

2. 准备条件

 在mysql中创建数据库echartsdb，数据库中创建表t_comment表，表中设置两个字段word与count，添加表中的数据。如：附件中的 echartsdb.sql

3. SpringBoot整合MyBatis

3.1 创建 SpringBoot项目

3.2 项目的修改

3.2.1 删除mvn相关文件

3.2.2 pom.xml 依赖的修改

SpringBoot 版本为：2.3.5.RELEASE 、JDK修改为 1.8 等

具体内容，查看下文

"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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0modelVersion>
    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.3.5.RELEASEversion>
        <relativePath/> 
    parent>
    <groupId>com.laomagroupId>
    <artifactId>echartswordproartifactId>
    <version>0.0.1-SNAPSHOTversion>
    <name>echartswordproname>
    <description>Demo project for Spring Bootdescription>
    <properties>
        <java.version>1.8java.version>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-thymeleafartifactId>
        dependency>
 
        <dependency>
            <groupId>org.mybatis.spring.bootgroupId>
            <artifactId>mybatis-spring-boot-starterartifactId>
            <version>2.0.1version>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-jdbcartifactId>
        dependency>
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>8.0.29version>
        dependency>
        <dependency>
            <groupId>org.projectlombokgroupId>
            <artifactId>lombokartifactId>
            <version>1.18.20version>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
            <scope>testscope>
        dependency>
    dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
            plugin>
        plugins>
    build>
 
project>

4. 创建项目的相关内容

4.1 项目结构设计：controller、service、mapper、pojo 等，resources/templates下创建index.html 页面，如下：

具体代码如下：

===Comment===
 
@Data
public class Comment {
    private String word;
    private Integer count;
}
 
===CommentController===
 
@Controller
public class CommentController {
    @Autowired
    private CommentService commentService;
    @RequestMapping("/")
    public String index(){
        return "index";
    }
    @ResponseBody
    @RequestMapping("/getData")
    public Object getData(){
        return commentService.getComments();
    }
}
 
===CommentService===
 
public interface CommentService {
    List getComments();
}
 
===CommentServiceImpl===
 
@Service
public class CommentServiceImpl implements CommentService {
    @Autowired
    private CommentMapper commentMapper;
    @Override
    public List getComments() {
        return commentMapper.getComments();
    }
}
 
===CommentMapper===
 
@Mapper
public interface CommentMapper {
    @Select("SELECT * FROM t_comment")
    List getComments();
}
 
===index.html===
 
"en" xmlns:th="http://www.thymeleaf.org">
    "UTF-8">
    
    可视化界面

4.2 application.properties 配置

spring.application.name=echartswordpro
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://192.168.170.100:3306/echartsdb
spring.datasource.username=root
spring.datasource.password=123456
 
mybatis.type-aliases-package=com.neuedu.echartswordpro.pojo

4.3 启动项目，访问 http://localhost:8080/getData 进行测试

5. echarts 插件引入及配置

5.1 需要使用echarts文件及词云文件echarts-wordcloud，使用文件及版本

 jquery2.2.4 、echarts5.0.1、echarts-wordcloud-2.0.0

对应的文件查看：附件

5.2 项目中引入对应的文件：

 resouces/static 下创建js目录，将对应的文件存入进去，如下图：

5.3. index.html 中引入 js文件

html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>云词title>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}">script>
    <script type="text/javascript" th:src="@{/js/echarts.min.js}">script>
    <script type="text/javascript" th:src="@{/js/echarts-wordcloud.min.js}">script>
head>
<body>
    可视化界面
body>
html>

5.4 在html中创建云词的存储容器并创建云词对应的js文件

html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>云词title>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}">script>
    <script type="text/javascript" th:src="@{/js/echarts.min.js}">script>
    <script type="text/javascript" th:src="@{/js/echarts-wordcloud.min.js}">script>
head>
<body>
    <div id="wordcount" style="width: 500px;height: 350px">div>
 
    <script type="text/javascript" th:src="@{/js/wordcount.js}">script>
body>
html>

5.5 wordcount.js 中具体内容如下：

$(document).ready(function(){
    var myChart = echarts.init(document.getElementById('wordcount'));
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'wordCloud', //词云图
                gridSize: 6, //词的间距
                shape: 'circle', //词云形状，可选diamond，pentagon，circle，triangle，star等形状
                sizeRange: [12, 45], //词云大小范围
                width: 900, //词云显示宽度
                height: 500, //词云显示高度
                textStyle: {
                    color: function () {
                        //词云的颜色随机
                        return (
                            'rgb(' +
                            [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') +
                            ')'
                        );
                    },
                    emphasis: {
                        shadowBlur: 10, //阴影的模糊等级
                        shadowColor: '#333' //鼠标悬停在词云上的阴影颜色
                    }
                },
                data: []
            }
        ]
    };
    fetch("/getData").then(response => response.json()).then(res => {
        let arr_wordcounts = []
        for(var data of res){
            let word = {
                name: data.word,
                value: data.count
            }
            arr_wordcounts.push(word)
        }
        option.series[0].data = arr_wordcounts
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
 
 
})

 备注：注意 如果数据量大的话，设置的圆形云词图就会显示为矩形。如果要显示对应的圆形，则可以少显示一些数据，例如在Mapper接口中使用limit 显示一部分数据

启动项目，访问：http://localhost:8080/ ，效果图如下：

6. 扩展：自定义云图形状

6.1 在option的series中，每个对象都有一个maskImage属性可以自定义云词形状，如有需要的可以自行百度学习。

至此，整个案例整理完毕！