成都市建设局官方网站,公司设计说明,wordpress食谱门户,一级a做爰片免费网站国产1. 技术点 SpringBoot、MyBatis、thymeleaf、MySQL、ECharts 等
2. 准备条件 在mysql中创建数据库echartsdb#xff0c;数据库中创建表t_comment表#xff0c;表中设置两个字段word与count#xff0c;添加表中的数据。如#xff1a;附件中的 echartsdb.sql
3. SpringBoot…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 version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.3.5.RELEASE/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.laoma/groupIdartifactIdechartswordpro/artifactIdversion0.0.1-SNAPSHOT/versionnameechartswordpro/namedescriptionDemo project for Spring Boot/descriptionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.0.1/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.29/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion1.18.20/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project4. 创建项目的相关内容
4.1 项目结构设计controller、service、mapper、pojo 等resources/templates下创建index.html 页面如下 具体代码如下
CommentData
public class Comment {private String word;private Integer count;
}CommentControllerController
public class CommentController {Autowiredprivate CommentService commentService;RequestMapping(/)public String index(){return index;}ResponseBodyRequestMapping(/getData)public Object getData(){return commentService.getComments();}
}CommentServicepublic interface CommentService {ListComment getComments();
}CommentServiceImplService
public class CommentServiceImpl implements CommentService {Autowiredprivate CommentMapper commentMapper;Overridepublic ListComment getComments() {return commentMapper.getComments();}
}CommentMapperMapper
public interface CommentMapper {Select(SELECT * FROM t_comment)ListComment getComments();
}index.html!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8titleTitle/title
/head
body可视化界面
/body
/html
4.2 application.properties 配置
spring.application.nameechartswordpro
spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver
spring.datasource.urljdbc:mysql://192.168.170.100:3306/echartsdb
spring.datasource.usernameroot
spring.datasource.password123456mybatis.type-aliases-packagecom.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 langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title云词/titlescript typetext/javascript th:src{/js/jquery.min.js}/scriptscript typetext/javascript th:src{/js/echarts.min.js}/scriptscript typetext/javascript th:src{/js/echarts-wordcloud.min.js}/script
/head
body可视化界面
/body
/html
5.4 在html中创建云词的存储容器并创建云词对应的js文件
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title云词/titlescript typetext/javascript th:src{/js/jquery.min.js}/scriptscript typetext/javascript th:src{/js/echarts.min.js}/scriptscript typetext/javascript th:src{/js/echarts-wordcloud.min.js}/script
/head
bodydiv idwordcount stylewidth: 500px;height: 350px/divscript typetext/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, //词云形状可选diamondpentagoncircletrianglestar等形状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属性可以自定义云词形状如有需要的可以自行百度学习。 至此整个案例整理完毕
