Home > Java > javaTutorial > body text

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

WBOY
Release: 2023-05-19 10:16:28
forward
1448 people have browsed it

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

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

##Implementation process

1. pom.xml

pom.xml introduction (only required for the example in this article, other dependencies are imported by yourself)

<!--Thymeleaf整合security-->
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-springsecurity5</artifactId>
    <version>3.0.4.RELEASE</version>
</dependency>
 <!--导入lombok小辣椒驱动依赖,用来生成get/set方法依赖-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <!--<optional>true</optional>-->
    <version>1.18.12</version>
    <scope>provided</scope><!--自动生成有参无参构造-->
</dependency>
<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.4</version>
 </dependency>
Copy after login

2. Backend program example

1. Controller layer

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<String> dataname = paramoduleService.finddata();
        ArrayList<Integer> 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";
    }
}
Copy after login

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

2. Service layer

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<String> finddata();

    ArrayList<Integer> finddatanum();
}
Copy after login

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

3. ServiceImpl layer

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<String> finddata(){ return paramoduleDao.finddata(); }
    //查出数据数量
    @Override
    public ArrayList<Integer> finddatanum(){ return paramoduleDao.finddatanum(); }
}
Copy after login

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

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;

}
Copy after login

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

5. dao(pojo) layer

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<String> finddata();

     ArrayList<Integer> finddatanum();

}
Copy after login

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

6 . daoMapper layer

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dvms.dao.ParamoduleDao">

    <!--查询数据名-->
    <select id="finddata" resultType="String">
        select dataname from data
    </select>

    <!--查询数据数量-->
    <select id="finddatanum" resultType="Integer">
        select datanum from data
    </select>
    
</mapper>
Copy after login

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

7. Database data table

How SpringBoot+thymeleaf+Echarts+Mysql realizes visual data reading

3. Front-end program example

Front-end introduction:

	<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js">
	<html lang="en" xmlns:th="http://www.thymeleaf.org"></script>
Copy after login

Shows part of the front-end program, mainly the following two sentences:

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

JSON.parse(dataname)  // JSON接收数据
Copy after login
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<h4 class="page-title">数据可视化测试示例</h4>
					<div class="row">
						<div class="col-md-12">
							<div class="panel">
								<div class="panel-heading">
									<h4 class="panel-title">读取数据库数据可视化示例</h4>
                                    <div class="right">
                                        <button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i>
                                        </button>
                                        <button type="button" class="btn-remove"><i class="lnr lnr-cross"></i></button>
                                    </div>
								</div>
								<div class="panel-body">
									<!--<div id="demo-line-chart" class="ct-chart"></div>-->
									<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
								<div class="col-md-6" id="main" >
                                    <script type="text/javascript" th:inline="javascript">

                                        //在js读取thymeleaf变量值
                                        var dataname=[[${datanameJson}]];
                                        var datanum=[[${datanumJson}]];


                                        // 基于准备好的dom,初始化echarts实例
                                        var myChart = echarts.init(document.getElementById(&#39;main&#39;));
                                        // 指定图表的配置项和数据
                                        var option = {
                                            title: {
                                                text: &#39;读取数据库数据可视化示例&#39;
                                            },
                                            tooltip: {},
                                            legend: {
                                                data: [&#39;数量&#39;]
                                            },
                                            xAxis: {
                                                data: JSON.parse(dataname)
                                            },
                                            yAxis: {},
                                            color:[&#39;#62d1de&#39;],//在这里设置colorList,是一个数组,图片颜色会按顺序选取
                                            series: [
                                                {
                                                    name: &#39;数量&#39;,
                                                    type: &#39;bar&#39;,
                                                    data: JSON.parse(datanum)
                                                }
                                            ]
                                        };


                                        // 使用刚指定的配置项和数据显示图表。
                                        myChart.setOption(option);
                                    </script>

                                </div>

                                <div class="col-md-6" id="main1" >

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


                                        // 基于准备好的dom,初始化echarts实例
                                        var myChart1 = echarts.init(document.getElementById(&#39;main1&#39;));
                                        option = {
                                            title: {
                                                text: &#39;某站点用户访问来源&#39;,
                                                subtext: &#39;纯属虚构&#39;,
                                                left: &#39;center&#39;
                                            },
                                            tooltip: {
                                                trigger: &#39;item&#39;,
                                                formatter: &#39;{a} <br/>{b} : {c} ({d}%)&#39;
                                            },
                                            legend: {
                                                orient: &#39;vertical&#39;,
                                                left: &#39;left&#39;,
                                                data: [&#39;直接访问&#39;, &#39;邮件营销&#39;, &#39;联盟广告&#39;, &#39;视频广告&#39;, &#39;搜索引擎&#39;]
                                            },
                                            color:[&#39;#62d1de&#39;,&#39;#54d6b6&#39;,&#39;#a6db69&#39;,&#39;#ffd454&#39;,&#39;#ffa361&#39;,&#39;#d1d1d1&#39;],//在这里设置colorList,是一个数组,图片颜色会按顺序选取
                                            series: [
                                                {
                                                    name: &#39;访问来源&#39;,
                                                    type: &#39;pie&#39;,
                                                    radius: &#39;55%&#39;,
                                                    center: [&#39;50%&#39;, &#39;60%&#39;],
                                                    data: [
                                                        {value: 335, name: &#39;直接访问&#39;},
                                                        {value: 310, name: &#39;邮件营销&#39;},
                                                        {value: 234, name: &#39;联盟广告&#39;},
                                                        {value: 135, name: &#39;视频广告&#39;},
                                                        {value: 1548, name: &#39;搜索引擎&#39;}
                                                    ],
                                                    emphasis: {
                                                        itemStyle: {
                                                            shadowBlur: 10,
                                                            shadowOffsetX: 0,
                                                            shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
                                                        }
                                                    }
                                                }
                                            ]
                                        };

                                        // 使用刚指定的配置项和数据显示图表。
                                        myChart1.setOption(option);
                                    </script>
                                </div>
								</div>
                            </div>
							</div>
						</div>
								</div>
							</div>
						</div>
			<!-- END MAIN CONTENT -->
		</div>
Copy after login

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!

Related labels:
source:yisu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template