SpringBoot+Thymeleaf+ECharts实现大数据可视化

SpringBoot+Thymeleaf+ECharts实现大数据可视化 SpringBoot+Thymeleaf+ECharts实现大数据可视化教程目录0x00教程内容0x01新建SpringBoot项目1.新建maven工程2.编写HelloWorld程序代码0x02引入ECharts资源1.获取JQuery与ECharts资源2.新建ECharts模版html文件3.添加后台java代码4.ECharts模版样式预览0x03SpringBoot整合Thymeleaf1.新建myECharts方法2.引入Thymeleaf3.ECharts新样式预览4.模式升级0xFF总结0...

SpringBoot+Thymeleaf+ECharts实现大数据可视化教程目录0x00教程内容0x01新建SpringBoot项目1.新建maven工程2.编写HelloWorld程序代码0x02引入ECharts资源1.获取JQuery与ECharts资源2.新建ECharts模版html文件3.添加后台java代码4.ECharts模版样式预览0x03SpringBoot整合Thymeleaf1.新建myECharts方法2.引入Thymeleaf3.ECharts新样式预览4.模式升级0xFF 总结 0x00教程内容新建SpringBoot项目引入ECharts资源SpringBoot整合Thymeleaf0x01新建SpringBoot项目1.新建maven工程a.SpringInitializr->Default（ProjectSDK要自行装好并配置好）b.Group、Artifact等可随意修改，注意修改此处JavaVersion为自己相应的版本（可能会默认是11），其他的使用默认即可：c.勾选Web（可能你的版本已经变为SpringWeb）、Thymeleaf，项目会自动加上依赖：d.项目名称与项目位置，可自行修改：e.此处可能会显示此窗口，其实就是提示是否要新打开一个窗口显示而已，此处选哪个没关系：点击后，IDEA右下角有滑条在跳动，其实是在下载相关依赖，稍等一会后就不再闪动了。2.编写HelloWorld程序代码a.新建一个HelloController类：packagecom.example.demo;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;/***@Auther:邵奈一*@Date:2019/01/30下午4:36*@Description:HelloController控制器*/@ControllerpublicclassHelloController{@RequestMapping("/")publicStringsayHello(){return"index";}}b.在templates目录下新建一个index.html界面并添加代码：

TitleHelloWorld!c.点击绿色小箭头，然后打开浏览器，输入（localhost:8080），可看到：0x02引入ECharts资源1.获取JQuery与ECharts资源a.下载ECharts和JQuery的js文件，并在static目录新建js文件夹，然后复制echarts.min.js与jquery-3.1.1.js到此文件夹：ECharts地址：http://echarts.baidu.com/download.htmlJQuery地址：https://jquery.com/download/说明：现在的链接网页界面已经发生改变，大家可以不下载，直接引入CDN即可。2.新建ECharts模版html文件a.新建demo.html文件：

ECharts

//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据varoption={title:{text:'ECharts入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};//使用刚指定的配置项和数据显示图表。myChart.setOption(option);3.添加后台java代码a.在HelloController中添加myDemo方法：@RequestMapping("/demo")publicStringmyDemo(){return"demo";}4.ECharts模版样式预览a.重启项目，打开浏览器（localhost:8080/demo），可看到：0x03SpringBoot整合Thymeleaf1.新建myECharts方法a.在HelloController中添加myECharts方法：@RequestMapping("/echarts")publicStringmyECharts(Modelmodel){Stringskirt="裙子";intnums=30;model.addAttribute("skirt",skirt);model.addAttribute("nums",nums);return"echarts";}2.引入Thymeleafa.复制一份demo.html，修改成echarts.html,在添加Themeleaf相关信息（最后一步有总览图）：xmlns:th=www.thymeleaf.orgb.引入jquery文件：注意：如果没有jquery-3.1.1.js文件，则使用下面的语句代替：c.在

下面添加代码：d.在里面添加代码：varskirt=$("#skirt").val();varnums=$("#nums").val();e.修改data的代码为变量skirt、nums：xAxis:{data:[skirt,"羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},series:[{name:'销量',type:'bar',data:[nums,20,36,10,10,20]}]f.echarts.html完整代码：

ECharts

//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));varskirt=$("#skirt").val();varnums=$("#nums").val();//指定图表的配置项和数据varoption={title:{text:'ECharts入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:[skirt,"羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[nums,20,36,10,10,20]}]};//使用刚指定的配置项和数据显示图表。myChart.setOption(option);3.ECharts新样式预览a.重启项目，打开浏览器（localhost:8080/echarts），可看到：4.模式升级a.将echarts.html的两行代码注释掉b.将这两行代码：varskirt=$("#skirt").val();varnums=$("#nums").val();换成：varskirt="[[${skirt}]]";varnums="[[${nums}]]";其实效果是一样的！请自己思考一下，为什么效果是一样的？！0xFF总结本教程从HelloWorld开始，一步一步进阶为显示ECharts静态界面，再到接收后台传送过来的数据，整合了前后台Thymeleaf与SpringBoot，为开发非常重要的一步；需要特别注意路径问题。需要自己学习一下HTML、CSS、JS的相关知识。进阶教程请查看文章：SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化（进阶篇），通过实战例子，技能包含JSON、Ajax、跨域问题解决等等。 -全文完-

                    本文档为【SpringBoot+Thymeleaf+ECharts实现大数据可视化】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

SpringBoot+Thymeleaf+ECharts实现大数据可视化

你可能还喜欢