Java中引入Echarts展示后台统计数据

最新推荐文章于 2024-08-10 07:49:01 发布

fu_code

最新推荐文章于 2024-08-10 07:49:01 发布

阅读量898

点赞数

分类专栏：笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/fu_com/article/details/105047466

版权

笔记专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Java中引入Echarts展示后台统计数据

引入步骤
1、我们也可以在 ECharts 的官网：https://www.echartsjs.com/zh/download.html下载需要的js文件，有以下几种选择：

完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js

2、在页面中引入上面下载下来js文件：

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/HighCharts/js/echarts.js"></script>

3、页面代码：

<%@ page contentType="text/html;charset=UTF-8"%>
<%request.setCharacterEncoding("UTF-8");%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Echarts的使用</title>
 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/HighCharts/js/echarts.js"></script>
</head>
<body>
<div id="queryDiv" class="easyui-panel" title="查询" style="padding:10px;background:#fafafa;overflow: hidden;" data-options="collapsible:true,closable:false">
 <table style="margin:0 auto;">
         <tr>
       <td width="100" align="right">日期范围：</td>
       <td  align="left">
       <input id="rq1"  name="rq1" class="easyui-datebox" size=16/>
       到
       <input id="rq2"  name="rq2" class="easyui-datebox" size=16/>
      </td>
         <td width="100" align="right"> 
          <span>时间：</span>
      </td>
         <td> 
       <input id="sj" name="sj"  class="easyui-combobox"  size=41 data-options="
        valueField: 'code',
        textField: 'value',
        data: [{
         code: '0',
         value: '日',
         'selected':'true' 
        },{
         code: '1',
         value: '周'
        },{
         code: '2',
         value: '月'
        }]"/>
      </td>
      <td width="100" align="right">是否分银行展示：</td>
               <td>
      <input  class="easyui-combobox" name="yhmc" id="yhmc" editable="false" size=41 data-options="
       valueField: 'key',
       textField: 'value',
       vlaue:0,
       data: [{
           key: '0',
        value: '是', 
        'selected':'true'     
       },{
           key: '1',
        value: '否' 
       }]" />
             </td>
  </tr>
 </table>  
  <div align="right" style="padding-right: 0px;margin-top: -20px">
        <br>
     <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="handleQuery()">查询</a>
     <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-undo" plain="true"   onclick="clearInput()" >重置</a>
  </div>  
</div>
<div class="t2_box_con" style="padding:10px 10px 10px;">
   <div id="rllfx" style="margin:0 auto;width:90%;height:500px;"></div>
</div>

<script type="text/javascript">
var rllfx = echarts.init(document.getElementById("rllfx")); 
function handleQuery(){
 var yh=$("#yhmc").combobox("getValue");
 var sj=$("#sj").combobox("getValue");
 var rq1=$("#rq1").datebox("getValue");
 var rq2=$("#rq2").datebox("getValue");
 if(rq1==""||undefined||null)rq1="";
 if(rq2==""||undefined||null)rq2="";
 var sjfw;
 if(rq1==""||rq2=="")
  sjfw="";
 else
     sjfw="rq1="+rq1+"&rq2="+rq2;
 rllfx.clear();
 createzxt(yh,sj,sjfw);
}
//清空查询输入框
function clearInput(){
 $("#queryDiv input").val('');
 $('#yhmc').combobox("setValue", "0");
 $('#sj').combobox("setValue", "0");
}
function mychart(xdata,legenddata,data)
{//xdata为x轴值，legendata为 图标名称数组，data为y轴显示的数组值
 var colors=["#31A4ff","#01ff19","#F13A30","#7b68ee","#6f4242","#b8860b","#30e0e0","#ba55d3","#cd5c5c","#ffa500","#cfb53b","#3cb371","#ffd700","#bc8f8f","#ff6347","#1e90ff"];
 var seriesdata=[];
 //遍历动态设置 折线 
    $.each(data,function(index,item){
     var p=
     {            
   name:legenddata[index],            
   data: item,            
   type: 'line',            
   symbol: 'circle', 
   itemStyle:{
    normal:{
     color:colors[index],
     lineStyle:{
      color:colors[index]
     }
    } 
   },
   // 设置折点大小            
   symbolSize: 10,            
   // 设置为光滑曲线            
   smooth: false ,
   showAllSymbol:true
  }
     seriesdata.push(p);
   });
 var option = {   
   title:{
    text:'',
    left:'left',
    top:'20%',
    textStyle:{color:'#6ab2ec',fontSize:16}
    
   },
   tooltip : {
    trigger: 'axis'
   },   
   legend:{
    data:legenddata
    //data:['数据1','数据2','数据3'] 
   },
   xAxis: {           
   type: 'category', 
   boundaryGap:false,
   name:'时间',
   data: xdata,     
   splitLine:{show:true,
      lineStyle:{                    
       color:'#323B4E'               
    }      
   },
   //设置轴线的属性            
   axisLine:{                
       lineStyle:{    color:'#696C72'          }            
         },             
     //调整x轴的lable             
       axisLabel:{ interval:0, rotate:0 },
     //显示刻度线 
       axisTick:{  show:false  }
   },        
   grid:{left:80,top:60,right:80,bottom:60,containLabel:true},
   yAxis: {   
   type: 'value',   
   name:'元         ',
   nameTextStyle:{
    padding:-10
   },
   // 控制网格线是否显示            
   splitLine: {                 
   show: true,                  
   //  改变轴线颜色                 
   lineStyle: {                    
   // 使用深浅的间隔色                    
   color: ['#132a6e']                 
   }},            
   //设置轴线的属性            
   axisLine:{
    lineStyle:{ color:'#6ab2ec' },
    onZero:false
   },
   axisTick:{  show:false  }
   },       
   /* 数据配置，若有多条折线则在数组中追加{name: , data: } */  
   series:seriesdata   
   };    
 rllfx.setOption(option);
 }
 function createzxt(yh,sj,sjfw){
  var url="";
  if(yh==""||undefined||null) yh="";
  if(sj==""||undefined||null) sj=""; 
  if(sjfw=="")
    url="${pageContext.request.contextPath}/yshd!getyhyetjxx.action?yh="+yh+"&sj="+sj;//没指定时间范围 查询 
  else
    url="${pageContext.request.contextPath}/yshd!getyhyetjxx.action?"+sjfw+"&yh="+yh+"&sj="+sj;//指定时间范围查询 
  $.ajax({
   type : "POST",
   //async:false,
   url : url,
   success : function(data)
   {   
     //alert(data);
     var data=JSON.parse(data);
     var legend=data.legenddata;
     if(data.code==0){
      var data=data.data;
      var legenddata=[];
      var xdata0=[];
      var d=[]; 
      //初始化图例名称
      $.each(legend,function(index,item){
       legenddata.push(item.legend);
      });
      $.each(data,function(index1,item){ 
       var itms=[];
       $.each(item,function(index2,item){
        if(index1==0)
         { xdata0.push(item.time);} //初始化横轴 
        itms.push(item.ye)//获取纵轴值 
       });
       d.push(itms);//加入到      
      });  
      mychart(xdata0,legenddata,d);
      }  
   }
  }); 
 }
$(document).ready(function() {  
 //初始化日期控件
  $("#rq1").datebox({
            formatter:myformatter,
      parser:myparser,
      onSelect:function(date)
      {
       $("#rq1").val(date);
      } 
     }
    );
  $("#rq2").datebox({
         formatter:myformatter,
    parser:myparser,
    onSelect:function(date)
    {
     $("#rq2").val(date);
    } 
   }
  );
  var yh=$("#yhmc").combobox("getValue");
  var sj=$("#sj").combobox("getValue");
  createzxt(yh,sj,"");
});
 </script>
</body>
</html>

4、后台代码：

public void getyhyetjxx()
 {
   //获取统计信息map
    boolean flag=true;
    Map<String,List<Map>> map=yshdManager.getYhyetjxx(sj, yh, rq1, rq2);
    List<Map> legenddata=new ArrayList<Map>();
    TreeMap bfyhMap=new TreeMap();
    List<Map> bfyhData=new ArrayList<Map>();
    List<List<Map>> data=new ArrayList<List<Map>>();
       JSONObject json=new JSONObject();
    json.put("msg", "获取成功");
    json.put("code", 0);
    Iterator it= map.keySet().iterator();
    while(it.hasNext())
    {//循环取出各银行名称作为图标
     Map mm= new HashMap();
     List<Map> dataList=new ArrayList<Map> ();
     String yh=(String) it.next();
     mm.put("legend",yh);
     legenddata.add(mm);
     for (Map m :  map.get(yh)) 
     {//遍历key银行的数据
      Iterator i= m.keySet().iterator();
      Map md=new HashMap();
      if(i.hasNext())
      {   
       //组装分银行的数据
       String time=(String) i.next();
       md.put("time", time);
       md.put("ye",m.get(time));
       if(bfyhMap.containsKey(time))
       {
      BigDecimal count= (BigDecimal) bfyhMap.get(time);
      BigDecimal c=count.add((BigDecimal) m.get(time));
      bfyhMap.remove(time);
      bfyhMap.put(time, c);
       }
       else if(!bfyhMap.containsKey(time))
       {
        bfyhMap.put(time, (BigDecimal)m.get(time));
       }
      } 
      dataList.add(md);
     }
     data.add(dataList);
    }  
    //处理不分银行的数据
    if(yh.equals("1"))
    {
    Iterator i=bfyhMap.keySet().iterator();
     while(i.hasNext())
     {   
      String time=(String) i.next();
      Map md=new HashMap();
      md.put("time", time);
      md.put("ye", bfyhMap.get(time));
      bfyhData.add(md);
     }
     data.clear();
     legenddata.clear();
     Map m= new HashMap();
     m.put("legend", "总数据");
     legenddata.add(m);
     data.add(bfyhData);
    }
    String jsonArray=JSON.toJSONString(data);
    JSONArray array=JSONArray.parseArray(jsonArray);
    json.put("data", array); 
    //加入图标信息
    json.put("legenddata", legenddata);
    //发送数据
    HttpServletResponse response = ServletActionContext.getResponse();
    try
    {
      PrintWriter out=response.getWriter();
      out.print(json.toString());
      out.flush();
      out.close();
    } catch (IOException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
    }      
 }