Springboot整合mybatis访问数据并将读取的数据发送到前端通过echarts绘图展示。

最新推荐文章于 2023-04-13 11:54:48 发布

爱吃虾的鱼

最新推荐文章于 2023-04-13 11:54:48 发布

阅读量3k

点赞数 15

分类专栏： Java 数据可视化文章标签：数据库 mybatis ajax java

本文链接：https://blog.youkuaiyun.com/qq_45058254/article/details/106875126

版权

Java 同时被 2 个专栏收录

21 篇文章

订阅专栏

数据可视化

15 篇文章

订阅专栏

本文介绍如何使用SpringBoot、MyBatis和ECharts实现数据从后端到前端的传输及图表展示，涉及数据库读取、Ajax数据交互及ECharts绘图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Springboot整合mybatis访问数据并将读取的数据发送到前端通过echarts绘图展示。

文章目录

创建一个springboot项目并集成mybatis简单的访问数据点击这里。

1，实现简介

实现：通过mybatis从后台读取数据通过ajax发送到前端，前端拿到数据将数据传入到我们echarts画图的js代码中。简单的来说就是将后台从数据库中取到的数据发送到前端，前端再传入我们需要的绘图的代码中。

2，使用的技术

1，mybatis读取数据库中的数据。
2，ajax获取后台传来的数据。
3，echarts 绘图。

3，逻辑代码

3.1，数据库数据展示
数据是从2000年到2019年的
在这里插入图片描述
3.2，数据对应的实体类

package com.echart.entity;

/**
 * @author ganxiang
 * IDE      IntelliJ IDEA
 * @project_name and filename echart YearsData
 * @date 2020/06/19 0019 14:34
 */
public class YearsData {
    private String index;
    private  Integer id;
    private String years2019;
    private String years2018;
    private String years2017;
    private String years2016;
    private String years2015;
    private String years2014;
    private String years2013;
    private String years2012;
    private String years2011;
    private String years2010;
    private String years2009;
    private String years2008;
    private String years2007;
    private String years2006;
    private String years2005;
    private String years2004;
    private String years2003;
    private String years2002;
    private String years2001;
    private String years2000;

    @Override
    public String toString() {
        return "YearsData{" +
                "index='" + index + '\'' +
                ", id=" + id +
                ", years2019='" + years2019 + '\'' +
                ", years2018='" + years2018 + '\'' +
                ", years2017='" + years2017 + '\'' +
                ", years2016='" + years2016 + '\'' +
                ", years2015='" + years2015 + '\'' +
                ", years2014='" + years2014 + '\'' +
                ", years2013='" + years2013 + '\'' +
                ", years2012='" + years2012 + '\'' +
                ", years2011='" + years2011 + '\'' +
                ", years2010='" + years2010 + '\'' +
                ", years2009='" + years2009 + '\'' +
                ", years2008='" + years2008 + '\'' +
                ", years2007='" + years2007 + '\'' +
                ", years2006='" + years2006 + '\'' +
                ", years2005='" + years2005 + '\'' +
                ", years2004='" + years2004 + '\'' +
                ", years2003='" + years2003 + '\'' +
                ", years2002='" + years2002 + '\'' +
                ", years2001='" + years2001 + '\'' +
                ", years2000='" + years2000 + '\'' +
                '}';
    }

    public String getYears2011() {
        return years2011;
    }

    public void setYears2011(String years2011) {
        this.years2011 = years2011;
    }


    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getIndex() {
        return index;
    }

    public void setIndex(String index) {
        this.index = index;
    }

    public String getYears2019() {
        return years2019;
    }

    public void setYears2019(String years2019) {
        this.years2019 = years2019;
    }

    public String getYears2018() {
        return years2018;
    }

    public void setYears2018(String years2018) {
        this.years2018 = years2018;
    }

    public String getYears2017() {
        return years2017;
    }

    public void setYears2017(String years2017) {
        this.years2017 = years2017;
    }

    public String getYears2016() {
        return years2016;
    }

    public void setYears2016(String years2016) {
        this.years2016 = years2016;
    }

    public String getYears2015() {
        return years2015;
    }

    public void setYears2015(String years2015) {
        this.years2015 = years2015;
    }

    public String getYears2014() {
        return years2014;
    }

    public void setYears2014(String years2014) {
        this.years2014 = years2014;
    }

    public String getYears2013() {
        return years2013;
    }

    public void setYears2013(String years2013) {
        this.years2013 = years2013;
    }

    public String getYears2012() {
        return years2012;
    }

    public void setYears2012(String years2012) {
        this.years2012 = years2012;
    }

    public String getYears2010() {
        return years2010;
    }

    public void setYears2010(String years2010) {
        this.years2010 = years2010;
    }

    public String getYears2009() {
        return years2009;
    }

    public void setYears2009(String years2009) {
        this.years2009 = years2009;
    }

    public String getYears2008() {
        return years2008;
    }

    public void setYears2008(String years2008) {
        this.years2008 = years2008;
    }

    public String getYears2007() {
        return years2007;
    }

    public void setYears2007(String years2007) {
        this.years2007 = years2007;
    }

    public String getYears2006() {
        return years2006;
    }

    public void setYears2006(String years2006) {
        this.years2006 = years2006;
    }

    public String getYears2005() {
        return years2005;
    }

    public void setYears2005(String years2005) {
        this.years2005 = years2005;
    }

    public String getYears2004() {
        return years2004;
    }

    public void setYears2004(String years2004) {
        this.years2004 = years2004;
    }

    public String getYears2003() {
        return years2003;
    }

    public void setYears2003(String years2003) {
        this.years2003 = years2003;
    }

    public String getYears2002() {
        return years2002;
    }

    public void setYears2002(String years2002) {
        this.years2002 = years2002;
    }

    public String getYears2001() {
        return years2001;
    }

    public void setYears2001(String years2001) {
        this.years2001 = years2001;
    }

    public String getYears2000() {
        return years2000;
    }

    public void setYears2000(String years2000) {
        this.years2000 = years2000;
    }
}

3.2，mybatis访问数据
3.2.1，dao:数据访问层

package com.echart.dao;

import com.echart.entity.YearsData;
import org.springframework.stereotype.Repository;

import java.util.List;


@Repository
public interface YearsMapper {
    YearsData findSixRow();//查询第六行数据
    YearsData findOneRow();//查询第一行数据
    YearsData findTwoRow();//查询第二行数据
    List findName();
}

3.2.2，service层

package com.echart.service;

import com.echart.dao.YearsMapper;
import com.echart.entity.YearsData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

/**
 * @author ganxiang
 * IDE      IntelliJ IDEA
 * @project_name and filename echart YearsService
 * @date 2020/06/19 0019 14:46
 */
@Service
public class YearsService {
    @Autowired
    YearsMapper yearsMapper;
    public List findName(){return yearsMapper.findName();}
    public YearsData findSixRow(){return yearsMapper.findSixRow();}
    public YearsData findOneRow(){return yearsMapper.findOneRow();}
    public YearsData findTwoRow(){return yearsMapper.findTwoRow();}

}

3.2.3,years.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.echart.dao.YearsMapper">
<!--通过<resultMap>来映射字段名和实体类属性名的一一对应关系-->
    <resultMap id="years" type="com.echart.entity.YearsData">
        <result column="指标" jdbcType="VARCHAR" property="index"/>
        <result column="2019年" jdbcType="VARCHAR" property="years2019"/>
        <result column="2018年" jdbcType="VARCHAR" property="years2018"/>
        <result column="2017年" jdbcType="VARCHAR" property="years2017"/>
        <result column="2016年" jdbcType="VARCHAR" property="years2016"/>
        <result column="2015年" jdbcType="VARCHAR" property="years2015"/>
        <result column="2014年" jdbcType="VARCHAR" property="years2014"/>
        <result column="2013年" jdbcType="VARCHAR" property="years2013"/>
        <result column="2012年" jdbcType="VARCHAR" property="years2012"/>
        <result column="2011年" jdbcType="VARCHAR" property="years2011"/>
        <result column="2010年" jdbcType="VARCHAR" property="years2010"/>
        <result column="2009年" jdbcType="VARCHAR" property="years2009"/>
        <result column="2008年" jdbcType="VARCHAR" property="years2008"/>
        <result column="2007年" jdbcType="VARCHAR" property="years2007"/>
        <result column="2006年" jdbcType="VARCHAR" property="years2006"/>
        <result column="2005年" jdbcType="VARCHAR" property="years2005"/>
        <result column="2004年" jdbcType="VARCHAR" property="years2004"/>
        <result column="2003年" jdbcType="VARCHAR" property="years2003"/>
        <result column="2002年" jdbcType="VARCHAR" property="years2002"/>
        <result column="2001年" jdbcType="VARCHAR" property="years2001"/>
        <result column="2000年" jdbcType="VARCHAR" property="years2000"/>
        <result column="id" jdbcType="INTEGER" property="id"/>
    </resultMap>

    <select id="findSixRow" resultMap="years" resultType="java.lang.String">
       select * from years limit 5,1
    </select>

    <select id="findOneRow" resultMap="years" resultType="java.lang.String">
       select * from years limit 1
    </select>

    <select id="findTwoRow" resultMap="years" resultType="java.lang.String">
       select * from years limit 1,1
    </select>

    <select id="findName" resultType="java.lang.String" resultMap="years">
       select * from years where identity =6

    </select>

</mapper>

3.2.4,controller层

package com.echart.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.echart.entity.YearsData;
import com.echart.service.UserService;
import com.echart.service.YearsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author ganxiang
 * IDE      IntelliJ IDEA
 * @project_name and filename echart Visualization
 * @date 2020/06/17 0017 21:34
 */
@Controller
public class Visualization {
    @Autowired
    YearsService yearsService;
    
    @RequestMapping("/leftTwo")
    @ResponseBody
    public String leftTwo(Map<String,List<Double>> paramter){
        YearsData yearsData =yearsService.findOneRow();
        YearsData yearsData1 =yearsService.findTwoRow();
        YearsData yearsData2 =yearsService.findSixRow();
        String json =JSON.toJSONString(yearsData);
        String json1=JSON.toJSONString(yearsData1);
        String json2=JSON.toJSONString(yearsData2);
//        System.out.println("国民总收入json:"+json);
//        System.out.println("国内生产总值(亿元):json:"+json1);
//        System.out.println("人均国内生产总值(元):json:"+json2);
        JSONObject jsonObject = JSON.parseObject(json);
        JSONObject jsonObject1 = JSON.parseObject(json1);
        JSONObject jsonObject2 = JSON.parseObject(json2);
        String key;
        String key1;
        String key2;
        List<String> list =new ArrayList<>();
        List<String> list1 =new ArrayList<>();
        List<String> list2 =new ArrayList<>();
        for (int i = 2000; i <2020 ; i++) {
            key=jsonObject.getString("years"+String.valueOf(i));
            key1=jsonObject1.getString("years"+String.valueOf(i));
            key2=jsonObject2.getString("years"+String.valueOf(i));
            System.out.println("key1:"+key);
            list.add(key);
            list1.add(key1);
            list2.add(key2);
        }
        List<Double> doubles =new ArrayList<>();
        List<Double> doubles1 =new ArrayList<>();
        List<Double> doubles2 =new ArrayList<>();
        for (String s:list){
            doubles.add(Double.valueOf(s));//国民总收入
//            integers.add(Integer.valueOf(s).intValue());
        }
        for (String s:list1){
            doubles1.add(Double.valueOf(s));//国内生产总值(亿元)
        }
        for (String s:list2){
            doubles2.add(Double.valueOf(s));//国内生产总值(亿元)
        }

        paramter.put("av1",doubles2);
        paramter.put("av2",doubles1);
        paramter.put("av3",doubles);
        return JSON.toJSONString(paramter);
    }

}

3.2.5，前端代码
html

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<title>首页</title>
		<link rel="stylesheet" href="css/demo.css">
		<script src="http://code.jquery.com/jquery-latest.js"></script><!--支持ajax的文件库-->
 		<script src="js/echarts/echarts.min.js"></script>
 	</head>
 	<body>
 		<div id="title" >标题</div>
 		<div id="left1">左一</div>
 		<div id="left2">左二</div>
 		<div id="right1">右一</div>
 		<div id="right2">右二</div>
		<script src="js/demo/bar-line.js"></script>
 	</body>
 </html>

echarts的js代码，里面包含ajax代码

$("#left1").isFunction(leftTwo());
function leftTwo() {
    var average1=[];//存储人均生产总值 元
    var average2=[];//储存国内生产总值 亿元
    var average3=[];//储存国民总收入 亿元
    $.ajax({
        url: "/leftTwo",
        type: "post",
        // aynsc:false,//发送同步请求
        datatype: "json",//后台返回来的数据类型
        success: function (result) {
            alert(result);
            var result = eval("(" + result + ")");
            average1 = result['av1'];
            average2=result['av2'];
            average3=result['av3'];
            alert(average3);
            var chart = echarts.init(document.getElementById('left1'), 'roma', {renderer: 'canvas'});
            var option= {
                "backgroundColor": "rgba(255,250,205,0.2)",
                "animation": true,
                "animationThreshold": 2000,
                "animationDuration": 1000,
                "animationEasing": "cubicOut",
                "animationDelay": 0,
                "animationDurationUpdate": 300,
                "animationEasingUpdate": "cubicOut",
                "animationDelayUpdate": 0,
                "series": [
                    {
                        "type": "bar",
                        "name": "\u56fd\u5185\u751f\u4ea7\u603b\u503c(\u4ebf\u5143)",
                        "data":average2,
                        "barCategoryGap": "20%",
                        "label": {
                            "show": false,
                            "position": "top",
                            "margin": 8
                        }
                    },
                    {
                        "type": "bar",
                        "name": "\u4eba\u5747\u56fd\u5185\u751f\u4ea7\u603b\u503c(\u5143)",
                        "data":average1,
                        "barCategoryGap": "20%",
                        "label": {
                            "show": false,
                            "position": "top",
                            "margin": 8
                        }
                    },
                    {
                        "type": "line",
                        "name": "\u56fd\u6c11\u603b\u6536\u5165(\u4ebf\u5143)",
                        "connectNulls": false,
                        "symbolSize": 4,
                        "showSymbol": true,
                        "smooth": false,
                        "step": false,
                        "data": [
                            [
                                "2000\u5e74",
                               average3[0]
                            ],
                            [
                                "2001\u5e74",
                                average3[1]
                            ],
                            [
                                "2002\u5e74",
                                average3[2]
                            ],
                            [
                                "2003\u5e74",
                                average3[3]
                            ],
                            [
                                "2004\u5e74",
                                average3[4]
                            ],
                            [
                                "2005\u5e74",
                                average3[5]
                            ],
                            [
                                "2006\u5e74",
                                average3[6]
                            ],
                            [
                                "2007\u5e74",
                                average3[7]
                            ],
                            [
                                "2008\u5e74",
                                average3[8]
                            ],
                            [
                                "2009\u5e74",
                                average3[9]
                            ],
                            [
                                "2010\u5e74",
                                average3[10]
                            ],
                            [
                                "2011\u5e74",
                                average3[11]
                            ],
                            [
                                "2012\u5e74",
                                average3[12]
                            ],
                            [
                                "2013\u5e74",
                                average3[13]
                            ],
                            [
                                "2014\u5e74",
                                average3[14]
                            ],
                            [
                                "2015\u5e74",
                                average3[15]
                            ],
                            [
                                "2016\u5e74",
                                average3[16]
                            ],
                            [
                                "2017\u5e74",
                                average3[17]
                            ],
                            [
                                "2018\u5e74",
                                average3[18]
                            ],
                            [
                                "2019\u5e74",
                                average3[19]
                            ]
                        ],
                        "hoverAnimation": true,
                        "label": {
                            "show": true,
                            "position": "top",
                            "margin": 8
                        },
                        "lineStyle": {
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        },
                        "areaStyle": {
                            "opacity": 0
                        }
                    }
                ],
                "legend": [
                    {
                        "data": [
                            "\u56fd\u5185\u751f\u4ea7\u603b\u503c(\u4ebf\u5143)",
                            "\u4eba\u5747\u56fd\u5185\u751f\u4ea7\u603b\u503c(\u5143)",
                            "\u56fd\u6c11\u603b\u6536\u5165(\u4ebf\u5143)"
                        ],
                        "selected": {
                            "\u56fd\u5185\u751f\u4ea7\u603b\u503c(\u4ebf\u5143)": true,
                            "\u4eba\u5747\u56fd\u5185\u751f\u4ea7\u603b\u503c(\u5143)": true
                        },
                        "show": false
                    }
                ],
                "tooltip": {
                    "show": true,
                    "trigger": "axis",
                    "triggerOn": "mousemove|click",
                    "axisPointer": {
                        "type": "cross"
                    },
                    "textStyle": {
                        "fontSize": 14
                    },
                    "borderWidth": 0
                },
                "xAxis": [
                    {
                        "show": true,
                        "scale": false,
                        "nameLocation": "end",
                        "nameGap": 15,
                        "gridIndex": 0,
                        "axisLabel": {
                            "show": true,
                            "position": "top",
                            "rotate": 45,
                            "margin": 8,
                            "interval": 0,
                            "fontSize": 10
                        },
                        "inverse": false,
                        "offset": 0,
                        "splitNumber": 5,
                        "minInterval": 0,
                        "splitLine": {
                            "show": false,
                            "lineStyle": {
                                "width": 1,
                                "opacity": 1,
                                "curveness": 0,
                                "type": "solid"
                            }
                        },
                        "data": [
                            "2000\u5e74",
                            "2001\u5e74",
                            "2002\u5e74",
                            "2003\u5e74",
                            "2004\u5e74",
                            "2005\u5e74",
                            "2006\u5e74",
                            "2007\u5e74",
                            "2008\u5e74",
                            "2009\u5e74",
                            "2010\u5e74",
                            "2011\u5e74",
                            "2012\u5e74",
                            "2013\u5e74",
                            "2014\u5e74",
                            "2015\u5e74",
                            "2016\u5e74",
                            "2017\u5e74",
                            "2018\u5e74",
                            "2019\u5e74"
                        ]
                    }
                ],
                "yAxis": [
                    {
                        "show": true,
                        "scale": false,
                        "nameLocation": "end",
                        "nameGap": 15,
                        "gridIndex": 0,
                        "axisLabel": {
                            "show": true,
                            "position": "top",
                            "rotate": 45,
                            "margin": 8,
                            "interval": 0,
                            "fontSize": 10
                        },
                        "inverse": false,
                        "offset": 0,
                        "splitNumber": 5,
                        "minInterval": 0,
                        "splitLine": {
                            "show": false,
                            "lineStyle": {
                                "width": 1,
                                "opacity": 1,
                                "curveness": 0,
                                "type": "solid"
                            }
                        }
                    }
                ],
                "title": [
                    {
                        "text": "\u56fd\u6c11\u751f\u4ea7\u6536\u5165\u53d8\u5316"
                    }
                ],
                "dataZoom": {
                    "show": true,
                    "type": "slider",
                    "realtime": true,
                    "start": 20,
                    "end": 80,
                    "orient": "horizontal",
                    "zoomLock": false
                }
            };
            chart.setOption(option);

        },
        error:function (msc) {
            alert(msc);
        }
    });

}