SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例

来源：脚本之家时间：2022-04-18 14:44:01

实现过程

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层

7. 数据库data表

3. 前端程序示例

前端引入：

<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js">
	</script>

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

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

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


			
			
				
					数据可视化测试示例
					
						
							
								
									读取数据库数据可视化示例
                                    
                                        
                                        
                                    
								
								
									
									
								
                                    <script type="text/javascript" th:inline="javascript">

                                        //在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);
                                    </script>

                                

                                

                                    <script type="text/javascript" th:inline="javascript">


                                        // 基于准备好的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);
                                    </script>