Springboot+mybatis+maven+echarts实现数据可视化（折线图饼图柱状图）

企业开发 2023-09-07 00:02:33 阅读次数: 0

一、开发环境

1、idea
2、Springboot maven
3、oracle(可自己进行配置修改成mysql）
4、mybatis druid
5、echarts

二、部分代码块

1、实体类(Echarts)

package com.example.echart3.entity;
public class Echarts {
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    private String name;
    private int num;
}

2、实现接口类（EchartsServiceImpl）

package com.example.echart3.service.impl;
import com.example.echart3.entity.Echarts;
import com.example.echart3.mapper.EchartsMapper;
import com.example.echart3.service.EchartsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class EchartsServiceImpl implements EchartsService {
    @Autowired(required = false)
    EchartsMapper echartsMapper;
    @Override
    public List<Echarts> findAll() {
        return this.echartsMapper.findAll();
    }
}

3、数据持久化Mapper接口（EchartsMapper)

package com.example.echart3.mapper;
import com.example.echart3.entity.Echarts;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface EchartsMapper {
        public List<Echarts> findAll();
}

4、实现Mapper接口（EchartsMapper.xml)

<?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.example.echart3.mapper.EchartsMapper">
    <!-- <resultMap id="BaseResultMap" type="com.example.echart3.entity.Echarts">
         <result column="name" jdbcType="VARCHAR" property="name" />
         <result column="num"  jdbcType="INTEGER" property="num" />
     </resultMap>-->
     <!--查询所有用户-->
    <select id="findAll" resultType="com.example.echart3.entity.Echarts">
        select name,num from echarts
    </select>
</mapper>

5、控制类（EchartsController)

package com.example.echart3.controller;
import java.util.List;
import com.example.echart3.entity.Echarts;
import com.example.echart3.service.EchartsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class EchartsController {
    @Autowired
    EchartsService echartsService;
    @RequestMapping("/image")
    public String image(){
       return "image";
   }
    @RequestMapping("/index")
    public String index(){
    **加粗样式**    return "test1";
    }
    /**
     * 查询echarts列表
     */
    @RequestMapping("/getdata")
    @ResponseBody需要向页面返回数据时
    public List<Echarts> list()
    {
        List<Echarts> list = echartsService.findAll();
        //获取list中第一个字段name和num
        return list;
    }
}

6、html页面

<!DOCTYPE html>
<html lang="zh" >
<!--xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"-->
<head>
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        .aa{
            text-align: center;
            background: lightblue;
            color: #000000;
            font-size: 28px;
        }
    </style>
</head>
<body>
<h1 class="aa">水果分布可视化</h1>
<div id="lineEcharts"  style="width: 500px;height:400px;position:absolute;top:100px"></div>
<div id="pieEcharts" style="width: 500px;height:400px;position:absolute;top:100px;left:500px"></div>
<div id="barEcharts" style="width: 500px;height:400px;position:absolute;top:100px;left:1000px"></div>

<script type="text/javascript">
        //初始化ehcharts实例
        var lineChart = echarts.init(document.getElementById("lineEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        lineChart.showLoading();
        //指定图表的配置项和数据
        var names = []; //类别数组（实际放x轴坐标值）
        var nums = []; //销量数组（Y坐标值）
        //var datatemp = [];
        $.ajax({//ajax异步数据交互，json格式互相传递数据，json是js对像的文本字符串，对象键值存在  字符串方式     可能需要进行eval解析json字符串
            type:"post",//type:标明是get还是post请求
            url:"/getdata",//url:请求后台的url
           // data: {},
          //  contentType: 'application/json',//contentType: 前端的参数格式
            //这里ContentType的值一般来说有两种取值, 默认是application/x-www-form-urlencoded; charset=UTF-8在实际开发中,经常会改成如上的application/json
            dataType:"json",//dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定
            async:false,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            success: function (result) {
                for (var i = 0; i < result.length; i++){
                    names.push(result[i].name);
                    nums.push(result[i].num);
                }
                },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert(XMLHttpRequest.readyState);//当数据请求失败可以查看请求的状态
            }
        });
    lineChart.hideLoading();//隐藏加载动画
    var option={
        title: {
            text: '折线图',
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            data: ['数量']
        },
     tooltip:{},
        //x轴
        xAxis: {
           type: 'category',
            boundaryGap: false,
            data: names
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis: {
            type: 'value'
        },
        //数据-data是最终要显示的数据
        series: [{
            name: '数量',
            type: 'line',
            data: nums
        }]
    };
    lineChart.setOption(option);

    //饼图
        var pieChart = echarts.init(document.getElementById("pieEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        pieChart.showLoading();
        //指定图表的配置项和数据
        var names1 = []; //类别数组（实际放x轴坐标值）
        var nums1 = []; //数组（Y坐标值）
        $.ajax({
            type: "post",
            async: false,
            url: "/getdata",   
            dataType: "json",
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    names1.push(result[i].name);
                    var obj = new Object();   
                }
            },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert(XMLHttpRequest.readyState);
    }
    });
                     pieChart.hideLoading();//隐藏加载动画
                     var option1 = {
                      title: {
                          text: '饼图',
                          // x: 'center'
                      },
                         //工具箱
                         //保存图片
                         toolbox: {
                             show: true,
                             feature: {
                                 saveAsImage: {
                                     show: true
                                 }
                             }
                         },
                        tooltip: {
                             trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                         },
                         legend: {
                             orient: 'vertical',
                            // x: '',
                             data: names1
                         },

                         calculable: true,
                         series: [{
                             name: '数量',
                             type: 'pie',
                             radius: '55%',
                             center: ['50%', '60%'],
                             data: nums1,
                             itemStyle: {
                                 emphasis: {
                                     shadowBlur: 10,
                                     shadowOffsextX: 0,
                                     shadowColor: 'rgba(0,0,0,0.5)'
                                 }
                             }
                         }]
                     }
                    pieChart.setOption(option1);

    var myChart = echarts.init(document.getElementById('barEcharts'));

    var Name = [];
    var num = [];
    //AJAX接收数据主体
    $.ajax({
     type:"POST",
     url:"/getdata",
     dataType:"json",
     async:false,
     success:function (result) {
      for (var i = 0; i < result.length; i++){
       Name.push(result[i].name);
       num.push(result[i].num);
      }
     },
     error :function(errorMsg) {
      alert("获取后台数据失败！");
     }
    });
    // 指定图表的配置项和数据
    var option = {
     title: {
      text: '水果分布'
     },
     tooltip: {},
     legend: {
      data:['数量']
     },
     xAxis: {
      //结合
      data: Name
     },

     yAxis: {},
     series: [{
      name: '数量',
      type: 'bar',
      //结合
      data: num
     }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

7、pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>echart3</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>echart3</name>
    <description>echart3</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>com.oracle.database.jdbc</groupId>
            <artifactId>ojdbc8</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.apache.shiro</groupId>
            <artifactId>shiro-core</artifactId>
            <version>1.2.3</version>
        </dependency>
        <dependency>
            <groupId>com.oracle.database.nls</groupId>
            <artifactId>orai18n</artifactId>
            <version>21.1.0.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

8、application.yml

server:
    port: 8888
  spring:
    datasource:
      driver-class-name: oracle.jdbc.driver.OracleDriver#改成你要使用的数据库驱动
      url: jdbc:oracle:thin:@DESKTOP-T7M23B3:1521/orcl#你的数据库链接
      username: ****
      password: ****
  mybatis:
    mapper-locations: classpath:/mapper/*.xml

数据库可根据实体类创建

三、测试结果


源码链接：echarts

猜你喜欢

转载自blog.csdn.net/sunxiaohong__/article/details/125404938
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022