Echarts+SpringMvc显示后台实时数据

2024-08-03 06:16:49

Echarts图表数据一般都是从后台数据库实时取数据的传输数据大多采用JSON数据格式
本文通过springmvc来拦截数据请求完成数据显示

以下是工程目录

该工程在一个springmvc的基础代码上搭建其中action类中只有ChartsAction有关
其中用到的包有其中有部分没用到的spring包不影响使用
因为本文会介绍两种json传输办法 jackjson和fastjson 所有两种的包都有插入

1. 新建项目导入所需jar包
2. 新建显示界面html文件 zhuxing.html

在此工程中采用封装函数填充的方式建立图表
将option封装成独立函数 div当做容器可以根据注入的option改变表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts-all.js"></script>
<script src="js/macarons.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/getbar.js"></script>
</head>
<body>
 <div id="main" style="width: 1000px; height: 500px"></div>
 <script type="text/javascript">
  //初始化表格
  var myChart = echarts.init(document.getElementById('main'), 'macarons');
  //载入option配置
  myChart.setOption(getlinebar());
 </script>
</body>
</html>

3.新建所需数据库注入所需数据

这是不同浏览器在市场的占比

4.配置springmvc

echarts采用ajax请求获取json数据通过springmvc进行拦截
首先在web.xml加入servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
 http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 id="WebApp_ID" version="3.1">

 <servlet>
  <servlet-name>springmvc</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <init-param>
   <param-name>contextConfigLocation</param-name>
   <param-value>/WEB-INF/spmvc-servlet.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <!-- 让Spring MVC的前端控制器拦截带有.do的请求 -->
 <!-- 注意这里不能拦截使用‘/'拦截所有请求 会导致js等静态文件无法加载 -->
 <servlet-mapping>
  <servlet-name>springmvc</servlet-name>
  <url-pattern>*.do</url-pattern>
 </servlet-mapping>
</web-app>

需要特别注意 *.do 可以解决静态资源无法加载的情况总共有三种方法解决
接下来新建spmvc-servlet.xml来配置这是使用Jackjson的配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
 xmlns:context="http://www.springframework.org/schema/context"
 xsi:schemaLocation="
  http://www.springframework.org/schema/beans
  http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
  http://www.springframework.org/schema/mvc
  http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
  http://www.springframework.org/schema/context
  http://www.springframework.org/schema/context/spring-context-4.2.xsd">

 <!-- spring可以自动去扫描base-pack下面的包或者子包下面的java文件 -->
 <context:component-scan base-package="com.l.action" />
 <mvc:default-servlet-handler />
 <!-- 启动Springmvc注解驱动 -->
 <mvc:annotation-driven />

 <bean id="stringConverter"
  class="org.springframework.http.converter.StringHttpMessageConverter">
  <property name="supportedMediaTypes">
   <list>
    <value>text/plain;charset=UTF-8</value>
   </list>
  </property>
 </bean>
 <bean id="jsonConverter"
  class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
 <bean
  class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
  <property name="messageConverters">
   <list>
    <ref bean="stringConverter" />
    <ref bean="jsonConverter" />
   </list>
  </property>
 </bean>
 <bean
  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix" value="/WEB-INF/jsp/"></property>
  <property name="suffix" value=".jsp"></property>
 </bean>
</beans>

5.数据库连接以及数据获取

因为要从数据库取数据新建com.l.utils.DbUtil.java 来获取数据连接

package com.l.utils;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class DbUtil {
 /*
  * private String dbUrl = "jdbc:mysql://localhost:3306/test"; private String
  * dbUserName = "root"; private String dbPassword = "1234"; private String
  * jdbcName = "com.mysql.jdbc.Driver";
  */

 public Connection getcon() {
  try {
   Class.forName("com.mysql.jdbc.Driver");
   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "1234");
   System.out.println("success");
   return con;
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
   return null;
  }

 }

 public void close(Connection con, Statement sm, ResultSet rs) {
  try {
   // 关闭。后面获取的对象先关闭。
   if (rs != null)
    rs.close();
   if (sm != null)
    sm.close();
   if (con != null)
    con.close();
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

}

根据需要扫描的包新建目录 com.l.action.ChartsAction.java 使用注解@ResponseBody

package com.l.action;

import java.sql.Connection;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.l.utils.DbUtil;

@Controller
public class ChartsAction {

 @RequestMapping(value = "/hello", method = RequestMethod.GET)
 @ResponseBody
 public List<Map<String, Object>> getbar() {
  Connection con = null;
  String sql = null;
  DbUtil dbutil = new DbUtil();
  try {
   con = dbutil.getcon();
   java.sql.Statement st = con.createStatement();
   sql = "select * from data";
   ResultSet rs = st.executeQuery(sql);
   List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
   while (rs.next()) {
    System.out.println(
      rs.getString(1) + " " + rs.getString(2) + " " + rs.getString(3) + " " + rs.getString(4));
    Map<String, Object> map = new HashMap<String, Object>();

    map.put("name", rs.getString(2));
    map.put("value", Double.parseDouble(rs.getString(3)));
    map.put("drilldown", Double.parseDouble(rs.getString(4)));
    list.add(map);
   }
   return list;
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return null;
 }
}

在地址栏数据http://localhost:8080/Demo01/hello.do来测试是否能够显示传出的json数据

6.开始编写option

当请求可以收到json数据后新建js目录，在该目录下新建getbar.js
其中data设置最重要

function getlinebar(params) {
 option = {
  tooltip : {
   trigger : 'axis',
  },
  legend : {
   data : [ '最大占比', '最小占比' ]
  },
  toolbox : {
   show : true,
   orient : 'vertical',
   y : 'center',
   feature : {
    mark : {
     show : true
    },
    magicType : {
     show : true,
     type : [ 'line', 'bar' ]
    },
    dataView : {
     show : true,
     readOnly : false
    },
    restore : {
     show : true
    },
    saveAsImage : {
     show : true
    }
   }
  },
  calculable : true,
  xAxis : [ {
   type : 'category',
   data : (function() {
    var data = [];
    $.ajax({
     url : 'http://localhost:8080/Demo01/hello.do',
     type : 'get',
     async : false,
     dataType : "json",
     success : function(json) {
      if (json) {
       for (var i = 0; i < json.length; i++) {
        console.log(json[i].name);
        data.push(json[i].name);
       }
      }
     }
    })
    return data;
   })()
  } ],
  yAxis : [ {
   type : 'value',
   axisLabel : {
    formatter : '{value} %'
   }
  } ],

  series : [ {
   name : '最小占比',
   type : 'bar',
   data : (function() {
    var arr = [];
    $.ajax({
     url : 'http://localhost:8080/Demo01/hello.do',
     type : 'get',
     dataType : "json",
     async : false,
     success : function(data) {
      if (data) {
       for (var i = 0; i < data.length; i++) {
        console.log(data[i].drilldown);
        arr.push(data[i].drilldown);
       }
      }
     }
    })
    return arr;
   })()
  }, {
   name : '最大占比',
   type : 'bar',
   data : (function() {
    var arr = [];
    $.ajax({
     url : 'http://localhost:8080/Demo01/hello.do',
     type : 'get',
     dataType : "json",
     async : false,
     success : function(data) {
      if (data) {
       for (var i = 0; i < data.length; i++) {
        console.log(data[i].value);
        arr.push(data[i].value);
       }
      }
     }
    })
    return arr;
   })()
  } ]
 };
 return option;
}

最终显示成功数据返回正常

在自己编写过程中遇到的问题主要有js html文件无法显示的问题 **主要是springmvc拦截没有设置正确
还有引入js文件的路径问题也会导致js无法引入**

<script src="js/getbar.js"></script>

这样的形式注意不要再最前面加上/ 会导致请求错误

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

SpringBoot+Echarts实现请求后台数据显示饼状图

场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
Echarts+SpringMvc显示后台实时数据

Echarts图表数据一般都是从后台数据库实时取数据的传输数据大多采用JSON数据格式本文通过springmvc来拦截数据请求完成数据显示以下是工程目录该工程在一个springmvc的基础代码上搭建其中action类中只有ChartsAction有关其中用到的包有其中有部分没用到的spring包不影响使用因为本文会介绍两种json传输办法 jackjson和fastjson 所有两种的包都有插入 1. 新建项目导入所需jar包 2. 新建显示界面html文件 zhuxing
Vue中使用Echarts仪表盘展示实时数据的实现

在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. 第二步: 我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中父组件中 <div class="chart" shadow="always">
利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示和详细的文档进行说明,为了方便使用,这里进行详细说明. 去官网:https://www.datatables.net/ 下载最新版本是v1.10.12. 在页面引入: <link rel="stylesheet" href="~/Content_Admin/css/boots
js前台分页显示后端JAVA数据响应

好久没有写过代码了,手有些痒了,正好底下小弟们某些功能的实现着实影响工程进度,便自己动手给写了一段. 功能:js前台分页显示 + 后台数据响应(JAVA Servlet即可) 框架:jquery1.8.7 此文目的:给那些刚入行软件开发,喜欢这也看看,那也看看,这儿copy一下,那儿copy一下初级小菜鸟们做一个表帅; 1 为程序者需认真踏实坐下来; 2 程序需要有投入才有收获; 3 有收获才有鼓舞,才有动力一步一步往下走! 下面上代码,具体会有小注释 1.web页面的逻辑处理(js代码写到页面
浅谈springMVC接收前端json数据的总结

对于json对象类型(即JsonObject)的数据,springMVC主要有以下几种方式接收: 1.通过Map接收 @RequestMapping(value = "/getAllStudio" ) public void getAllStudio(@RequestBody Map<String, Integer> map ) { JSONObject json = new JSONObject(); Integer page = map.get("page&q
Bootbox将后台JSON数据填充Form表单的实例代码

序言: 刚结束公司的三个月试用期,意味着我即将正式步入社会成为广大从事IT行业的一员.作为一个编程小白,无论从技术层面还是知识层面都是比较薄弱的,想要成为一个优秀的程序员不断的学习与探索是不可避免的.我相信一切的付出与收获是成正比的!Fighting! 这几天在做公司的实际项目的时候,需要实现选中Bootstrap table中的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑.获取表格行的数据是比较方便的,具体可以查找Bootstrap table参考文档,具体地址可以直接
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

声明:这里非常感谢闲心大神,开源了非常好用的前端UI框架,layui,如有侵权请联系我.当然闲心在2.0版本的layuiAdmin已经支持了,不过是收费版的,需要的同学可以自行购买,网址:http://www.layui.com/admin/pro/ 本人在做管理后台事用到了左侧的导航列表,但是管理后台进来的菜单是根据不同账户的权限,显示不同的菜单.这时候需要动态的渲染左侧的列表.但是1.0版本只是更新到2级菜单,不满足如下图的3级菜单需求,只能自己动手,改造源码话不多说,上代码: 1.htm
JQuery通过后台获取数据遍历到前台的方法

做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是遍历时出现了问题,下面来简单分析下. 前台代码: 案例1: <div class="Record"> <div class="RecordLeft text-center fl"> <p><span>经办记录</sp
Vue+Element ui 根据后台返回数据设置动态表头操作

由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

Echarts+SpringMvc显示后台实时数据

相关推荐

随机推荐