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

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

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

数据可视化测试

实现过程

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. 后端程序示例

Controller层

package com.dvms.controller;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<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";    }}

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;public interface ParamoduleService {    ArrayList<String> finddata();    ArrayList<Integer> finddatanum();}

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;@Servicepublic class ParamoduleServiceImpl implements ParamoduleService {    @Autowired    private ParamoduleDao paramoduleDao;    //查出数据名    @Override    public ArrayList<String> finddata(){ return paramoduleDao.finddata(); }    //查出数据数量    @Override    public ArrayList<Integer> finddatanum(){ return paramoduleDao.finddatanum(); }}

entity层

package com.dvms.entity;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;}

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;@Repositorypublic interface ParamoduleDao {     ArrayList<String> finddata();     ArrayList<Integer> finddatanum();}

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">    <!--查询数据名-->    <select id="finddata" resultType="String">        select dataname from data    </select>    <!--查询数据数量-->    <select id="finddatanum" resultType="Integer">        select datanum from data    </select>    </mapper>

数据库data表

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 获取后端参数方式JSON.parse(dataname)  // JSON接收数据

<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('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>                                </div>                                <div class="col-md-6" id="main1" >                                    <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/>{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>                                </div></div>                            </div></div></div></div></div></div><!-- END MAIN CONTENT --></div>

关于“SpringBoot+thymeleaf+Echarts+mysql怎么实现数据可视化读取”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“SpringBoot+thymeleaf+Echarts+Mysql怎么实现数据可视化读取”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网数据库频道。