SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取

这篇文章主要介绍了SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取文章都会有所收获，下面我们一起来看看吧。

通过从数据库获取数据转为JSON数据，返回前端界面实现数据可视化。

数据可视化测试

实现过程

1. pom.xml

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;@Controllerpublic 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 */@Servicepublic 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 */@Repositorypublic interface ParamoduleDao {     ArrayList finddata();     ArrayList finddatanum();}

6. daoMapper层

                select dataname from data                    select datanum from data        

7. 数据库data表

3. 前端程序示例

前端引入：

展示前端部分程序，主要是以下两句：

var datanum=[[${datanumJson}]]; // thymeleaf 获取后端参数方式JSON.parse(dataname)  // JSON接收数据

                
                                                
                                
                                        
数据可视化测试示例
                                        
                                                
                                                        
                                                                
                                                                        
读取数据库数据可视化示例