Springboot整合mybatis访问数据并将读取的数据发送到前端通过echarts绘图展示。
本文共 20948 字，大约阅读时间需要 69 分钟。
Springboot整合mybatis访问数据并将读取的数据发送到前端通过echarts绘图展示。
文章目录
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;@Repositorypublic 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 */@Servicepublic 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配置，自定义查询数据
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 */@Controllerpublic class Visualization { @Autowired YearsService yearsService; @RequestMapping("/leftTwo") @ResponseBody public String leftTwo(Map > 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 list =new ArrayList<>(); List list1 =new ArrayList<>(); List 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 doubles =new ArrayList<>(); List doubles1 =new ArrayList<>(); List 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首页 标题左一左二右一右二
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); } });} 4，运行结果
前端显示
后台显示 
简单的实现完成，就是创建与数据库中表对应的实体类比较繁琐一点。 看到这儿了，点赞呗🤞😊😂 转载地址：http://reqzi.baihongyu.com/
你可能感兴趣的文章
CentOS 下 tree命令用法详解
查看>>
docker上传镜像至Registry时https报错解决方法
查看>>
安装 docker-compose （实测可用，妈妈再也不用担心被墙了）
查看>>
docker下删除none的images
查看>>
Linux提权获取敏感信息方法
查看>>
Ubuntu 16.04开机A start job is running for Raise network interface(5min 4s)解决方法
查看>>
Ubuntu 16.04开机隐藏菜单缩短时间
查看>>
Ubuntu 更换国内源
查看>>
Ubuntu16.04下Docker pull connection refused 解决办法
查看>>
通过 三大机制 揭秘 IPFS 工作原理
查看>>
Ubuntu 16.04卸载PostgresQL
查看>>
华为路由器交换机配置命令
查看>>
docker下运行kalilinux并配置ssh访问
查看>>
使用 Docker 容器应该避免的 10 个事情
查看>>
postgres基本操作(个人总结版)
查看>>
求数组中最长递增子序列
查看>>
用C++设计一个不能被继承的类
查看>>
linux core文件机制
查看>>
私有继承中的派生类对象与基类对象间的转换
查看>>
5.7 观察者模式observer（行为模式）
查看>>