Springboot+mybatis+maven+echarts realizes data visualization (line chart pie chart histogram)

1. Development environment

1. idea
2. Springboot maven
3. oracle (can be configured and changed to mysql by yourself)
4. mybatis druid
5. echarts

2. Some code blocks

1. Entity class (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. Implement the interface class (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. Data persistence Mapper interface (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. Implement the Mapper interface (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. Control class (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 page

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

Databases can be created based on entity classes

3. Test results

Source link: echarts

Springboot+mybatis+maven+echarts realizes data visualization (line chart pie chart histogram)

1. Development environment

2. Some code blocks

3. Test results

Guess you like