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 等

具体内容,查看下文

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.laoma</groupId>
    <artifactId>echartswordpro</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>echartswordpro</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.29</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </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<Comment> getComments();
}

===CommentServiceImpl===

@Service
public class CommentServiceImpl implements CommentService {
    @Autowired
    private CommentMapper commentMapper;
    @Override
    public List<Comment> getComments() {
        return commentMapper.getComments();
    }
}

===CommentMapper===

@Mapper
public interface CommentMapper {
    @Select("SELECT * FROM t_comment")
    List<Comment> getComments();
}

===index.html===

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    可视化界面
</body>
</html>

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文件

<!DOCTYPE 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文件

<!DOCTYPE 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属性可以自定义云词形状,如有需要的可以自行百度学习。

至此,整个案例整理完毕!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/519680.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

webrtcP2P通话流程

文章目录 webrtcP2P通话流程webrtc多对多 mesh方案webrtc多对多 mcu方案webrtc多对多 sfu方案webrtc案例测试getUserMediagetUserMedia基础示例-打开摄像头getUserMedia canvas - 截图 打开共享屏幕 webrtcP2P通话流程 在这里&#xff0c;stun服务器包括stun服务和turn转发服…

Aurora8b10b(1)IP核介绍并基于IP核进行设计

文章目录 前言一、IP核设置二、基于IP核进行设计2.1、设计框图2.2、aurora_8b10b_0模块2.3、aurora_8b10b_0_CLOCK_MODULE2.4、aurora_8b10b_0_SUPPORT_RESET_LOGIC2.5、aurora8b10b_channel模块2.6、IBUFDS_GTE2模块2.7、aurora_8b10b_0_gt_common_wrapper模块2.8、aurora8b10…

多路转接-epoll/Reactor(2)

epoll 上次说到了poll&#xff0c;它存在效率问题&#xff0c;因此出现了改进的poll----epoll。 目前epoll是公认的效率最高的多路转接的方案。 快速了解epoll接口 epoll_create&#xff1a; 这个参数其实已经被废弃了。 这个值只要大于0就可以了。 这是用来创建一个epoll模…

阿里云服务器资费:一年或1个月费用价格,2024年更新

阿里云服务器资费多少钱&#xff1f;一年或1个月费用价格&#xff1a;2核2G3M轻量服务器61元一年、ECS云服务器2核2G3M 99元一年&#xff0c;2核4G轻量165元一年&#xff0c;2核4G ECS 199元一年&#xff0c;阿里云服务器网aliyunfuwuqi.com整理如下&#xff1a; 1、ECS经济型e…

SpringBoot快速入门笔记(4)

文章目录 一、Vue框架1、前端环境准备2、简介3、快速开始4、事件绑定 二、Vue组件化开发1、NPM2、Vue Cli3、组件化开发4、SayHello自定义组件5、Movie自定义组件 一、Vue框架 1、前端环境准备 编码工具&#xff1a;VSCode 依赖管理&#xff1a;NPM 项目构建&#xff1a;VueCl…

Word·VBA文档合并

目录 1&#xff0c;复制法&#xff0c;不保留原文档格式2&#xff0c;复制法&#xff0c;保留原文档格式3&#xff0c;插入法&#xff0c;保留原文档格式 之前的文章《WordVBA实现邮件合并》虽然可以生成邮件合并文档结果&#xff0c;但是不能像《python实现word邮件合并》一样…

LeetCode-79. 单词搜索【数组 字符串 回溯 矩阵】

LeetCode-79. 单词搜索【数组 字符串 回溯 矩阵】 题目描述&#xff1a;解题思路一&#xff1a;回溯 回溯三部曲。这里比较关键的是给board做标记&#xff0c;防止之后搜索时重复访问。解题思路二&#xff1a;回溯算法 dfs,直接看代码,很容易理解。visited哈希&#xff0c;防止…

Android面试题之Listview篇

秋招在即&#xff0c;计蒙准备在国庆假期结束前整理一套Android初级面试题籍&#xff0c;希望对大家有所帮助 提示&#xff1a;以下是本篇文章正文内容 ListView 1.当 ListView 数据集改变后&#xff0c;如何更新 ListView 使用该 ListView 的 adapter 的 notifyDataSetChange…

记录一下前端定时器清除失效的问题

目录 一、问题引入 二、错误代码&#xff1a; 三、错误原因 四、修正的代码 附 vue提供的线上运行代码网址以便证实可用性 一、问题引入 按理说&#xff0c;打开定时器 xxx setInterval(()>{ },100)&#xff0c;之后只要 clearInterval(xxx) 就可以顺利关闭定时器…

【浅尝C++】继承机制=>虚基表/菱形虚继承/继承的概念、定义/基类与派生类对象赋值转换/派生类的默认成员函数等详解

&#x1f3e0;专栏介绍&#xff1a;浅尝C专栏是用于记录C语法基础、STL及内存剖析等。 &#x1f3af;每日格言&#xff1a;每日努力一点点&#xff0c;技术变化看得见。 文章目录 继承的概念及定义继承的概念继承的定义定义格式继承关系与访问限定符 基类和派生类对象赋值转换继…

如果你正在投简历,一定要试试这款AI工具!

今天给大家分享一款AI简历神器 - BitBitFly AI 简历助手&#xff0c;这个工具可以帮助大家快速、精准投简历&#xff0c;并且提供职位匹配度分析报告&#xff0c;提供专业优化简历建议提高简历和职位匹配度&#xff0c;轻松拿下offer。 如果你在找工作的时候遇到以下问题&…

主流验证码对比及选型

目录 一、什么是验证码二、验证码的作用三、验证码的类型四、验证码厂商1、 [腾讯云验证码](https://cloud.tencent.com/document/product/1110)1.1 验证方式1.2 费用 2、[阿里云验证码](https://www.aliyun.com/activity/security/wafcaptcha)2.1 验证方式2.2 费用 3、[顶象验…

计算机网络——35什么是网络安全

什么是网络安全 机密性&#xff1a;只有发送方和预订的接收方能否理解传输的报文内容 发送方加密报文接收方解密报文 认证&#xff1a;发送方和接收方需要确认对方的身份报文完整性&#xff1a;发送方、接收方需要确认的报文在传输的过程中或者事后没有被改变访问控制和服务的…

android11 SystemUI入門之KeyguardPatternView解析

view层级树为&#xff1a; 被包含在 keyguard_host_view.xml中 。 <?xml version"1.0" encoding"utf-8"?> <!-- This is the host view that generally contains two sub views: the widget viewand the security view. --> <com.andro…

麻了,别再为难软件测试员了

前言 有不少技术友在测试群里讨论&#xff0c;近期的面试越来越难了&#xff0c;要背的八股文越来越多了,考察得越来越细&#xff0c;越来越底层&#xff0c;明摆着就是想让我们徒手造航母嘛&#xff01;实在是太为难我们这些测试工程师了。 这不&#xff0c;为了帮大家节约时…

RAG知识分享

文章目录 1.为什么要做RAG1.1. 解决幻觉问题1.1.1 直接输入问题1.1.2. 问题 相关知识 2. 什么是RAG2.1. 基本概念2.2. 基本RAG方法2.2.1. 知识预处理2.2.2. 知识检索2.2.3. 答案生成 3. RAG 与 Long Context3.1. Long Context3.2. RAG 与Long Context3.3 RAG对比Long Context的…

(2024,超分辨率,膨胀卷积和低通滤波,SD)FouriScale:免训练高分辨率图像合成的频率视角

FouriScale: A Frequency Perspective on Training-Free High-Resolution Image Synthesis 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 2. 相关工作 2.2 通过扩散模型进行…

【攻防世界】ics-05

php://filter 伪协议查看源码 preg_replace 函数漏洞 1.获取网页源代码。多点点界面&#xff0c;发现点云平台设备维护中心时&#xff0c;页面发生变化。 /?pageindex 输入什么显示什么&#xff0c;有回显。 用php://filter读取网页源代码 ?pagephp://filter/readconvert.…

PC版复古珠宝饰品网站模板 基于pbootcms的首饰类源码下载

PbootCMS复古珠宝饰品网站模板&#xff1a;PCWAP双端同步&#xff0c;数据即时共享&#xff0c;轻松打造专业饰品首饰平台 本模板基于PbootCMS内核开发&#xff0c;专为饰品首饰网站、复古珠宝饰品网站等企业量身定制。同时&#xff0c;其他行业同样适用&#xff0c;只需替换文…

【PostgreSQL】技术传承:使用Docker快速部署PostgreSQL数据库

前言 PostgreSQL的重要贡献者Simon Riggs因一起坠机事故不幸离世。Simon Riggs是英国著名的软件与服务领导者&#xff0c;也是PostgreSQL的主要开发者和贡献者。事故发生在英国当地时间3月26日13:41分&#xff0c;当时他驾驶的私人通用航空Cirrus SR22飞机在英国达克斯福德机场…