devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Java中引入Echarts展示后台统计数据_java后台数据如何集成echartjs图表

作者：盐析白兔 | 2024-07-15 08:14:58

赞

踩

java后台数据如何集成echartjs图表

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

完全版：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>

  • 1

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245

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();
    }      
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/828424?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号