这篇文章主要为大家详细介绍了Echarts+SpringMvc显示后台实时数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Echarts图表数据一般都是从后台数据库实时取数据的 传输数据大多采用JSON数据格式
本文通过springmvc来拦截数据请求 完成数据显示
以下是工程目录
该工程在一个springmvc的基础代码上搭建 其中action类中只有ChartsAction有关
其中用到的包有 其中有部分没用到的spring包 不影响使用
因为本文会介绍两种json传输办法 jackjson和fastjson 所有两种的包都有插入
1. 新建项目 导入所需jar包
2. 新建显示界面html文件 zhuxing.html
在此工程中采用封装函数填充的方式建立图表
将option封装成独立函数 div当做容器 可以根据注入的option改变表格
Insert title here
3.新建所需数据库 注入所需数据
这是不同浏览器在市场的占比
4.配置springmvc
echarts采用ajax请求获取json数据 通过springmvc进行拦截
首先在web.xml加入servlet
springmvc org.springframework.web.servlet.DispatcherServlet contextConfigLocation /WEB-INF/spmvc-servlet.xml 1 springmvc *.do
需要特别注意 *.do 可以解决静态资源无法加载的情况 总共有三种方法解决
接下来新建spmvc-servlet.xml来配置 这是使用Jackjson的配置文件
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> 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> list = new ArrayList>(); while (rs.next()) { System.out.println( rs.getString(1) + " " + rs.getString(2) + " " + rs.getString(3) + " " + rs.getString(4)); Map map = new HashMap(); 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 最终显示成功 数据返回正常
在自己编写过程中遇到的问题主要有js html文件无法显示的问题 **主要是springmvc拦截没有设置正确
还有引入js文件的路径问题也会导致js无法引入**
这样的形式 注意不要再最前面加上/ 会导致请求错误
以上就是Echarts+SpringMvc显示后台实时数据的详细内容，更多请关注0133技术站其它相关文章！
