| SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取 | 您所在的位置：网站首页 › java手动分页怎么实现 › SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取 |
SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取
|
通过从数据库获取数据转为JSON数据，返回前端界面实现数据可视化。 数据可视化测试
pom.xml引入(仅为本文示例需要，其他依赖自行导入) org.thymeleaf.extras thymeleaf-extras-springsecurity5 3.0.4.RELEASE org.projectlombok lombok 1.18.12 provided com.alibaba fastjson 1.2.4 登录后复制2. 后端程序示例1. Controller层 package com.dvms.controller; /* *文件名: DataviewController *创建者: CJW *创建时间:2022/4/15 20:33 *描述: TODO */ import com.alibaba.fastjson.JSON; import com.dvms.service.ParamoduleService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList; @Controller public class DataviewController { @Autowired private ParamoduleService paramoduleService; // 查出 @RequestMapping("/data/todatashow") public String finddata(ModelMap model){ ArrayList dataname = paramoduleService.finddata(); ArrayList datanum = paramoduleService.finddatanum(); String datanameJson = JSON.toJSONString(dataname); String datanumJson = JSON.toJSONString(datanum); System.out.println(datanameJson); System.out.println(datanumJson); model.put("datanameJson",datanameJson); model.put("datanumJson",datanumJson); return "ems/charts"; } }登录后复制
2. Service层 package com.dvms.service; import com.dvms.entity.Record; import com.dvms.entity.Video; import java.util.ArrayList; import java.util.List; import java.util.Map; /* *文件名: ParamoduleService *创建者: CJW *创建时间:2022/1/15 10:54 *描述: TODO */ public interface ParamoduleService { ArrayList finddata(); ArrayList finddatanum(); }登录后复制
3. ServiceImpl层 package com.dvms.service.Impl; import com.dvms.dao.ParamoduleDao; import com.dvms.entity.Record; import com.dvms.entity.Video; import com.dvms.service.ParamoduleService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.ArrayList; import java.util.List; import java.util.Map; /* *文件名: ParamoduleServiceImpl *创建者: CJW *创建时间:2022/1/15 10:55 *描述: TODO */ @Service public class ParamoduleServiceImpl implements ParamoduleService { @Autowired private ParamoduleDao paramoduleDao; //查出数据名 @Override public ArrayList finddata(){ return paramoduleDao.finddata(); } //查出数据数量 @Override public ArrayList finddatanum(){ return paramoduleDao.finddatanum(); } }登录后复制
4. entity层 package com.dvms.entity; /* *文件名: Data *创建者: CJW *创建时间:2022/4/14 16:17 *描述: TODO */ import lombok.AllArgsConstructor; import lombok.NoArgsConstructor; import lombok.ToString; import lombok.experimental.Accessors; @lombok.Data @ToString @AllArgsConstructor @NoArgsConstructor @Accessors(chain = true) //链式调用 public class Data { private String id; private String dataname; private Integer datanum; }登录后复制
5. dao(pojo)层 package com.dvms.dao; import com.dvms.entity.Record; import com.dvms.entity.Video; import org.springframework.stereotype.Repository; import java.util.ArrayList; import java.util.List; import java.util.Map; /* *文件名: ParamoduleDao *创建者: CJW *创建时间:2022/1/15 10:52 *描述: TODO */ @Repository public interface ParamoduleDao { ArrayList finddata(); ArrayList finddatanum(); }登录后复制
6. daoMapper层 select dataname from data select datanum from data 登录后复制
7. 数据库data表
前端引入： 登录后复制展示前端部分程序，主要是以下两句： var datanum=[[${datanumJson}]]; // thymeleaf 获取后端参数方式 JSON.parse(dataname) // JSON接收数据登录后复制 数据可视化测试示例 读取数据库数据可视化示例 //在js读取thymeleaf变量值 var dataname=[[${datanameJson}]]; var datanum=[[${datanumJson}]]; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '读取数据库数据可视化示例' }, tooltip: {}, legend: { data: ['数量'] }, xAxis: { data: JSON.parse(dataname) }, yAxis: {}, color:['#62d1de'],//在这里设置colorList，是一个数组，图片颜色会按顺序选取 series: [ { name: '数量', type: 'bar', data: JSON.parse(datanum) } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 基于准备好的dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById('main1')); option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} {b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//在这里设置colorList，是一个数组，图片颜色会按顺序选取 series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart1.setOption(option); 登录后复制以上就是SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取的详细内容，更多请关注php中文网其它相关文章！ |
【本文地址】
公司简介
联系我们