Echarts+SpringMvc显示后台实时数据

2023-08-04 07:19:04 64

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

以下是工程目录

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

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

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





Inserttitlehere

//初始化表格 varmyChart=echarts.init(document.getElementById('main'),'macarons'); //载入option配置 myChart.setOption(getlinebar());

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的配置文件













text/plain;charset=UTF-8

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

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

packagecom.l.utils;

importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.Statement;

publicclassDbUtil{
/*
*privateStringdbUrl="jdbc:mysql://localhost:3306/test";privateString
*dbUserName="root";privateStringdbPassword="1234";privateString
*jdbcName="com.mysql.jdbc.Driver";
*/

publicConnectiongetcon(){
try{
Class.forName("com.mysql.jdbc.Driver");
Connectioncon=DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","1234");
System.out.println("success");
returncon;
}catch(Exceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
returnnull;
}

}

publicvoidclose(Connectioncon,Statementsm,ResultSetrs){
try{
//关闭。后面获取的对象先关闭。
if(rs!=null)
rs.close();
if(sm!=null)
sm.close();
if(con!=null)
con.close();
}catch(Exceptione){
e.printStackTrace();
}
}

}

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

packagecom.l.action;

importjava.sql.Connection;
importjava.sql.ResultSet;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.List;
importjava.util.Map;

importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.ResponseBody;

importcom.l.utils.DbUtil;

@Controller
publicclassChartsAction{

@RequestMapping(value="/hello",method=RequestMethod.GET)
@ResponseBody
publicList>getbar(){
Connectioncon=null;
Stringsql=null;
DbUtildbutil=newDbUtil();
try{
con=dbutil.getcon();
java.sql.Statementst=con.createStatement();
sql="select*fromdata";
ResultSetrs=st.executeQuery(sql);
List>list=newArrayList>();
while(rs.next()){
System.out.println(
rs.getString(1)+""+rs.getString(2)+""+rs.getString(3)+""+rs.getString(4));
Mapmap=newHashMap();

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);
}
returnlist;
}catch(Exceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
returnnull;
}
}

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

6.开始编写option

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

functiongetlinebar(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(){
vardata=[];
$.ajax({
url:'http://localhost:8080/Demo01/hello.do',
type:'get',
async:false,
dataType:"json",
success:function(json){
if(json){
for(vari=0;i
最终显示成功数据返回正常


在自己编写过程中遇到的问题主要有jshtml文件无法显示的问题**主要是springmvc拦截没有设置正确

还有引入js文件的路径问题也会导致js无法引入**

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Echarts+SpringMvc显示后台实时数据

热门推荐

随机推荐