Achieve data visualization by getting data from the database, converting it to JSON data, and returning it to the front-end interface.
Data visualization test
##Implementation process 1. pom.xmlpom.xml introduction (only required for the example in this article, other dependencies are imported by yourself)org.thymeleaf.extras thymeleaf-extras-springsecurity5 3.0.4.RELEASE org.projectlombok lombok 1.18.12 provided com.alibaba fastjson 1.2.4
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){ ArrayListdataname = 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"; } }
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 { ArrayListfinddata(); ArrayList finddatanum(); }
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 ArrayListfinddata(){ return paramoduleDao.finddata(); } //查出数据数量 @Override public ArrayList finddatanum(){ return paramoduleDao.finddatanum(); } }
4. entity layer
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; }
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 { ArrayListfinddata(); ArrayList finddatanum(); }
var datanum=[[${datanumJson}]]; // thymeleaf 获取后端参数方式 JSON.parse(dataname) // JSON接收数据
数据可视化测试示例
读取数据库数据可视化示例
The above is the detailed content of How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading. For more information, please follow other related articles on the PHP Chinese website!