SpringBoot+thymeleaf+Echarts+Mysql 實現(xiàn)數(shù)據(jù)可視化讀取的示例

更新時間：2022年04月18日 11:46:14 作者：*豬耳朵*

本文主要介紹了SpringBoot+thymeleaf+Echarts+Mysql 實現(xiàn)數(shù)據(jù)可視化讀取的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

實現(xiàn)過程

1. pom.xml

pom.xml引入(僅為本文示例需要，其他依賴自行導入)

<!--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>

2. 后端程序示例

1. Controller層

package com.dvms.controller;

/*
 *文件名: DataviewController
 *創(chuàng)建者: CJW
 *創(chuàng)建時間: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";
    }
}

請?zhí)砑訄D片描述

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
 *創(chuàng)建者: CJW
 *創(chuàng)建時間:2022/1/15 10:54
 *描述: TODO
 */
public interface ParamoduleService {

    ArrayList<String> finddata();

    ArrayList<Integer> finddatanum();
}

請?zhí)砑訄D片描述

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
 *創(chuàng)建者: CJW
 *創(chuàng)建時間:2022/1/15 10:55
 *描述: TODO
 */
@Service
public class ParamoduleServiceImpl implements ParamoduleService {

    @Autowired
    private ParamoduleDao paramoduleDao;
    //查出數(shù)據(jù)名
    @Override
    public ArrayList<String> finddata(){ return paramoduleDao.finddata(); }
    //查出數(shù)據(jù)數(shù)量
    @Override
    public ArrayList<Integer> finddatanum(){ return paramoduleDao.finddatanum(); }
}

請?zhí)砑訄D片描述

4. entity層

package com.dvms.entity;

/*
 *文件名: Data
 *創(chuàng)建者: CJW
 *創(chuàng)建時間: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;

}

請?zhí)砑訄D片描述

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
 *創(chuàng)建者: CJW
 *創(chuàng)建時間:2022/1/15 10:52
 *描述: TODO
 */

@Repository
public interface ParamoduleDao {

     ArrayList<String> finddata();

     ArrayList<Integer> finddatanum();

}

請?zhí)砑訄D片描述

6. daoMapper層

<?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">

    <!--查詢數(shù)據(jù)名-->
    <select id="finddata" resultType="String">
        select dataname from data
    </select>

    <!--查詢數(shù)據(jù)數(shù)量-->
    <select id="finddatanum" resultType="Integer">
        select datanum from data
    </select>
    
</mapper>

請?zhí)砑訄D片描述

7. 數(shù)據(jù)庫data表

請?zhí)砑訄D片描述

3. 前端程序示例

前端引入：

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

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

var datanum=[[${datanumJson}]]; // thymeleaf 獲取后端參數(shù)方式

JSON.parse(dataname)  // JSON接收數(shù)據(jù)

		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<h3 class="page-title">數(shù)據(jù)可視化測試示例</h3>
					<div class="row">
						<div class="col-md-12">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">讀取數(shù)據(jù)庫數(shù)據(jù)可視化示例</h3>
                                    <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準備一個具備大?。▽捀撸┑腄om -->
								<div class="col-md-6" id="main" style="width: 600px;height:400px;">
                                    <script type="text/javascript" th:inline="javascript">

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


                                        // 基于準備好的dom，初始化echarts實例
                                        var myChart = echarts.init(document.getElementById('main'));
                                        // 指定圖表的配置項和數(shù)據(jù)
                                        var option = {
                                            title: {
                                                text: '讀取數(shù)據(jù)庫數(shù)據(jù)可視化示例'
                                            },
                                            tooltip: {},
                                            legend: {
                                                data: ['數(shù)量']
                                            },
                                            xAxis: {
                                                data: JSON.parse(dataname)
                                            },
                                            yAxis: {},
                                            color:['#62d1de'],//在這里設置colorList，是一個數(shù)組，圖片顏色會按順序選取
                                            series: [
                                                {
                                                    name: '數(shù)量',
                                                    type: 'bar',
                                                    data: JSON.parse(datanum)
                                                }
                                            ]
                                        };


                                        // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
                                        myChart.setOption(option);
                                    </script>

                                </div>

                                <div class="col-md-6" id="main1" style="width: 600px;height:400px;">

                                    <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} <br/> : {c} (wppm3vysvbp%)'
                                            },
                                            legend: {
                                                orient: 'vertical',
                                                left: 'left',
                                                data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎']
                                            },
                                            color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//在這里設置colorList，是一個數(shù)組，圖片顏色會按順序選取
                                            series: [
                                                {
                                                    name: '訪問來源',
                                                    type: 'pie',
                                                    radius: '55%',
                                                    center: ['50%', '60%'],
                                                    data: [
                                                        {value: 335, name: '直接訪問'},
                                                        {value: 310, name: '郵件營銷'},
                                                        {value: 234, name: '聯(lián)盟廣告'},
                                                        {value: 135, name: '視頻廣告'},
                                                        {value: 1548, name: '搜索引擎'}
                                                    ],
                                                    emphasis: {
                                                        itemStyle: {
                                                            shadowBlur: 10,
                                                            shadowOffsetX: 0,
                                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                        }
                                                    }
                                                }
                                            ]
                                        };

                                        // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
                                        myChart1.setOption(option);
                                    </script>
                                </div>
								</div>
                            </div>
							</div>
						</div>
								</div>
							</div>
						</div>
			<!-- END MAIN CONTENT -->
		</div>

到此這篇關于SpringBoot+thymeleaf+Echarts+Mysql 實現(xiàn)數(shù)據(jù)可視化讀取的示例的文章就介紹到這了,更多相關SpringBoot可視化讀取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

迪米特法則_動力節(jié)點Java學院整理
這篇文章主要介紹了迪米特法則，迪米特法則就是一個在類創(chuàng)建方法和屬性時需要遵守的法則，有興趣的可以了解一下
2017-08-08
使用IDEA搭建Hadoop開發(fā)環(huán)境的操作步驟(Window10為例)
經(jīng)過三次重裝，查閱無數(shù)資料后成功完成hadoop在win10上實現(xiàn)偽分布式集群，以及IDEA開發(fā)環(huán)境的搭建。一步一步跟著本文操作可以避免無數(shù)天坑
2021-07-07
Spring事務管理下synchronized鎖失效問題的解決方法
這篇文章主要給大家介紹了關于Spring事務管理下synchronized鎖失效問題的解決方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Spring具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
Spring Boot 約定大于配置之如何實現(xiàn)自定義配置
本文介紹了SpringBoot的“約定大于配置”理念以及如何實現(xiàn)自定義配置,通過實現(xiàn)接口和添加@Configuration注解,開發(fā)者可以靈活地擴展和定制SpringBoot的默認行為,感興趣的朋友一起看看吧
2025-03-03
Java生成的隨機數(shù)靠譜嗎?多少次會重復?
今天給大家?guī)淼氖顷P于Java的相關知識,文章圍繞著Java生成的隨機數(shù)靠不靠譜展開,文中有非常詳細的介紹,需要的朋友可以參考下
2021-06-06
java編程題之合并兩個排序的鏈表
這篇文章主要為大家詳細介紹了java編程題之合并兩個排序的鏈表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-03-03
SpringBoot臨時屬性設置方法
這篇文章主要介紹了SpringBoot臨時屬性設置方法，SpringBoot工程可以基于java環(huán)境獨立進行jar文件啟動服務,文中給大家提到了命令行啟動常見問題以及解決方案，需要的朋友可以參考下
2022-09-09
Java編程中的檢查型異常與非檢查型異常分析
這篇文章主要介紹了Java編程中的未檢查型異常與非檢查型異常，以及異常的處理方式,需要的朋友可以參考下
2017-09-09
淺談Java8對字符串連接的改進正確姿勢
這篇文章主要介紹了Java8：對字符串連接的改進，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
SpringBoot項目實戰(zhàn)之加載和讀取資源文件
在項目的開發(fā)中,我們知道的是SpringBoot框架大大減少了我們的配置文件,但是還是留下了一個application.properties文件讓我們可以進行一些配置,下面這篇文章主要給大家介紹了關于SpringBoot項目實戰(zhàn)之加載和讀取資源文件的相關資料,需要的朋友可以參考下
2021-10-10