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;

@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表

3. 前端程序示例

前端引入：

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

var datanum=[[${datanumJson}]]; // thymeleaf 获取后端参数方式

JSON.parse(dataname)  // JSON接收数据

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