Echar柱状堆叠图X轴自定义显示功能

上效果图，这个功能在echar中是不自带的
源代码
<%@ page language="java" import="java.util.*"  pageEncoding="utf-8"%>
<%@page import="cn.com.victorysoft.eaf.authority.exposure.AppUser"%>
<%@page import="cn.com.victorysoft.bussiness.AuthorityUtil"%><%@page import="cn.com.victorysoft.eaf.util.DateUtil"%>
<%@page import="com.util.*"%>
<%@page import="com.util.StringUtil"%>
<%@page import="com.xtgs.service.IProcess"%>
<%@page import="cn.com.victorysoft.eaf.container.manager.BusinessManager"%>
<%@taglib prefix="vs" uri="/vseaf-tags" %><%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";AppUser user = (AppUser)session.getAttribute("_userInfo");
//INewsQueueService b = (INewsQueueService) BusinessManager.getService().getBean("INewsQueueService");
//IProcess b = (IProcess) BusinessManager.getService().getBean("com.xtgs.service.impl.ProcessImpl");
//List<NewsQueue> newsList = b.queryNewsLogin(request);
//List<Map> newsList = b.queryDbList(request);
//boolean ifBmLd = YwUtil.matchLocalRole(request,"业务部门经理");
List allCurrentTaskList = TaskList.listAllCurrentTask(user.getLoginName());
boolean isJyglb = UserUtil.isRole(user.getLoginName(),"AFAF30D396A641EBA59026D95AFF3703");
boolean isGsld =  UserUtil.isRole(user.getLoginName(), "F90A37970FC0423293F98D12B8982C84");
%><!DOCTYPE html>
<html lang="en"><head><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>SB Admin 2 - Bootstrap Admin Theme</title><!-- Bootstrap Core CSS --><link href="dashboard/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- MetisMenu CSS --><link href="dashboard/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"><!-- Custom CSS --><link href="dashboard/dist/css/sb-admin-2.css" rel="stylesheet"><!-- Morris Charts CSS --><link href="dashboard/vendor/morrisjs/morris.css" rel="stylesheet"><!-- Custom Fonts --><link href="dashboard/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="<%=basePath%>js/util.js?v=3"></script><!-- jQuery --><script src="dashboard/vendor/jquery/jquery.min.js"></script><!-- Bootstrap Core JavaScript --><script src="dashboard/vendor/bootstrap/js/bootstrap.min.js"></script><!-- Metis Menu Plugin JavaScript --><script src="dashboard/vendor/metisMenu/metisMenu.min.js"></script><!-- Custom Theme JavaScript --><script src="dashboard/dist/js/sb-admin-2.js"></script><script src="<%=basePath %>js/echarts.js"></script><script src="<%=basePath %>iconfont/iconfont.js"></script><style>#depShow .checkbox,#depShow2 .checkbox{display:inline-block; height:30px;margin-right: 10px;}.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style><style>.column1{background-color: #3B5998;border: 1px solid #DDDDDD;}.column2{background-color: #00A0D1;border: 1px solid #DDDDDD;}.column3{background-color: #DB4A39;border: 1px solid #DDDDDD;}.column4{background-color: #205081;border: 1px solid #DDDDDD;}.column5{background-color: #0080ff;border: 1px solid #DDDDDD;}.column6{background-color: #a08f47;border: 1px solid #DDDDDD;}.column7{background-color: #826953;border: 1px solid #DDDDDD;}.column8{background-color: #dcc042;border: 1px solid #DDDDDD;}.column9{background-color: #647b07;border: 1px solid #DDDDDD;}.column100{background-color: #ffffff;border: 1px solid #DDDDDD;}.mul{  list-style: none; margin-top: 10px; padding-left: 10px;}.mul li{ float: left; margin-right: 10px; cursor: pointer;}.mul li p{text-align: center; }</style></head><body><div id="wrapper" style="margin-top:20px;"><div id="page-wrapper" style="margin:0px;"><!-- /.row --><div class="row"><%String titleDesc="";String urlDesc="";String url="";String show="";String titleId="";String time="";for(int i=0;i<allCurrentTaskList.size();i++){Map map=null;if(i<allCurrentTaskList.size()){map=(Map)allCurrentTaskList.get(i);}titleDesc=map==null?"":map.get("name")+"";urlDesc=map==null?"":""+map.get("count");url=map==null?"":(String)map.get("url");show=map==null?"":"<a href='"+url+"'  style='color:#FFFFFF;font-size:40px;'>"+urlDesc+"</a>";if(show==""){show="<a href='"+url+"'  style='color:#FFFFFF;font-size:40px;'>"+"0"+"</a>";}if(titleDesc==""){titleDesc="暂无";}%><!-- 循环这个Start--><div class="col-lg-2 col-md-2"><!-- 目前可选颜色panel-primary, panel-green,  panel-yellow,panel-red--><div class="panel column<%=i+1 %>"><div class="panel-heading"><div class="row"><div class="col-xs-3"><!--  <i class="fa fa-comments fa-5x"></i>--><img src="<%=basePath %>images/main<%=i+1 %>.png" style="width:85px;height:75px;"></div><div class="col-xs-9 text-right"><div class="huge"><%=show %></div><!-- <div>subtitle</div> --></div></div></div><a href="<%=url%>"><div class="panel-footer"><span class="pull-left" style="font-size:20px;font-weight:bold;"><%=titleDesc %></span><span class="pull-right" style="font-size:20px;font-weight:bold;"><i class="fa fa-arrow-circle-right"></i></span><div class="clearfix"></div></div></a></div></div><!-- 循环这个end--><%}%></div><%if(isJyglb){ %><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bullhorn fa-fw"></i> 证件即将到期<!-- <div class="pull-right" ><div class="btn-group"><button type="button" style="border:none;background:none; vertical-align: middle;" onclick="loadMoreTz()">点击查看更多<span class="caret"></span></button></div></div> --></div><div class="panel-body"><div class="row"><div class="col-lg-12"><div class="table-responsive;" style="height: 200px;overflow-y: auto;"><table id="dynamic-table_zzxx"  class="table table-bordered table-hover table-striped" ><thead><tr><th style="text-align: center;width: 5%;" class='txt'>序号</th><th style="text-align: center;width: 20%;"  class='txt'>人员姓名</th><th style="text-align: center;width: 20%;" class='txt'>证件类型</th><th style="text-align: center;width: 20%;" class='txt'>发证时间</th><th style="text-align: center;width: 20%;" class='txt'>到期时间</th><th style="text-align: center;width: 15%;" class='txt'>操作</th></tr></thead><tbody id="dynamic-table_zzxx_tb"></tbody></table></div></div></div></div></div></div></div><script type="text/javascript">$(function(){getZzxx();});function getZzxx(){$.ajax({type: "POST",async: false,url: '<%=basePath%>userbaseinfoZj_ajaxQueryWillExpireSoonUserBaseinfoZzList.action',dataType: "json",success: function(data){$("#dynamic-table_zzxx_tb").empty()var json = data;var jlength = data.length;var trHtml = "";for(var i =1 ; i <=jlength ;i++){trHtml="<tr>" +"<td hidden style='width: 45px;'>"+json[i-1].PKID+"</td>" +"<td style='width: 30px;text-align: center;'>"+i+"</td>" +"<td style='width: 40px;text-align: center;'>"+json[i-1].NAME+"</td>" +"<td style='width: 90px;text-align: center'>"+json[i-1].BMMC+"</td>" +"<td style='width: 70px;text-align: center;white-space:nowrap;'>"+json[i-1].FZSJ+"</td>" +"<td style='width: 70px;text-align: center;white-space:nowrap;'>"+json[i-1].DQSJ+"</td>" +"<td style='width: 120px; text-align: center;'><a style='text-align: center;' href='javascript:goEditZz(\""+json[i-1].PKID+"\")'>修改</a></td>" +"</tr>"$("#dynamic-table_zzxx_tb").append(trHtml);}//console.log($("#dynamic-table_zzxx_tb").find("td").length);for(var i = 0 ;i<$("#dynamic-table_zzxx_tb").find("td").length;i++){if($("#dynamic-table_zzxx_tb").find("td")[i].textContent=='null'){$("#dynamic-table_zzxx_tb").find("td")[i].textContent=0;}}}});}</script><%} %><%if(!isGsld){%><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bullhorn fa-fw"></i>功能列表</div><div class="row"><div class="col-lg-12"><ul class="mul"><li onclick="goPage('项目立项','xmxx_goQueryGcxmList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-xiangmuguanli"></use></svg></p><p >项目立项</p></li><li onclick="goPage('合同管理','xmhtxx_goQueryHtList.action?lb=1')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-icon_hetongshangwutiaojianbiao"></use></svg></p><p >合同管理</p></li><li onclick="goPage('项目结算','xmxx_goQueryGcxmJcList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-calculator1"></use></svg></p><p >项目结算</p></li><li onclick="goPage('项目变更','xmxx_goQueryGcxmGcbgList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-xinxiangmuguanli"></use></svg></p><p >项目变更</p></li><li onclick="goPage('项目结项','xmhtxx_goQueryGcxmJxList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-dangan"></use></svg></p><p >项目结项</p></li><li onclick="goPage('项目费用','xmhtxx_goQueryGcxmList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-bag-yen"></use></svg></p><p >项目费用</p></li><li onclick="goPage('项目结转','地址')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-shouhuo"></use></svg></p><p >项目结转</p></li><li onclick="goPage('产值进度','xmjdxx_goQueryGcxmJdczList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-hege"></use></svg></p><p >产值进度</p></li><li onclick="goPage('工作日志','oagznr_goQueryOaGznrList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-lib1"></use></svg></p><p >工作日志</p></li></ul></div></div><div class="row"><div class="col-lg-12"><ul class="mul"><li onclick="goPage('采购申请','wzcgsq_goQueryWzsqList.action?type=1')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-tubiaozhizuomoban"></use></svg></p><p >采购申请</p></li><li onclick="goPage('菜单名字','wzrk_goQueryWzRkbList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-ruku"></use></svg></p><p >物资入库</p></li><li onclick="goPage('物资入库打印','wzrk_goPrintWzRkbList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-dadanfahuo-ziyoudayin"></use></svg></p><p >入库打印</p></li><li onclick="goPage('物资出库','wzck_goQueryWzCkbList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-chuku"></use></svg></p><p >物资出库</p></li><li onclick="goPage('物资出库打印','wzck_goPrintWzCkbList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-dayinji2"></use></svg></p><p >出库打印</p></li><li onclick="goPage('库存查询','wzbmkc_goQueryWzBmkcbList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-dingdanchaxun"></use></svg></p><p >库存查询</p></li><li onclick="goPage('采购明细查询','wzcgsqmx_goQueryAllWzsqMxGsLd.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-shixinchaxun"></use></svg></p><p >采购明细查询</p></li></ul></div></div><div class="row"><div class="col-lg-12"><ul class="mul"><li onclick="goPage('机械费管理','jxf_goQueryJxfDetailList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-in_transit"></use></svg></p><p >机械管理</p></li><li onclick="goPage('客户管理','xtcus_goXtCustomerList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-kehuguanli1"></use></svg></p><p >客户管理</p></li><li onclick="goPage('供应商管理','xtcus_goXtCustomerList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-gongyingshangguanli"></use></svg></p><p >供应商管理</p></li><li onclick="goPage('人员管理','user_goQueryUserBaseinfoList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-zhuanjiaguanli"></use></svg></p><p >人员管理</p></li><li onclick="goPage('薪酬管理','')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-jinqian-"></use></svg></p><p >薪酬管理</p></li><li onclick="goPage('劳务费','hrlwyd_goQueryHrLwYdList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-gongren1"></use></svg></p><p >劳务费</p></li><li onclick="goPage('证件合同到期提醒','userbaseinfoZj_goQueryUserBaseInfoZzList.action')"><p><svg class="icon" font-size="40px" aria-hidden="true"><use xlink:href="#icon-icon_hetongguanlizhizuo"></use></svg></p><p >证件到期提醒</p></li></ul></div></div></div></div></div>
<%}%><div class="row"><div class="col-lg-6"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bar-chart-o fa-fw"></i>兴通公司入库、出库变化趋势 单位:万元</div><!-- /.panel-heading --><div class="panel-body"><div id="morris-line-chart" style="width:100%; height:200px;"></div></div><!-- /.panel-body --></div></div><div class="col-lg-6"><div class="panel panel-default"><div class="panel-heading"><div id="gskchz"></div><%--  <div class="pull-right" >&lt;%&ndash;<a href="java     script:;" onclick="goBmkcMx()" style="color: black;vertical-align: middle;">点击进入详细数据</a>&ndash;%&gt;</div>--%></div><div class="panel-body"><div id="morris-area-chart" style="width:100%; height:200px;"></div></div><!-- /.panel-body --></div></div></div><!-- /.row --><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bar-chart-o fa-fw"></i>合同签订及结算(含往年合同未履行完毕) 单位:万元 &nbsp;&nbsp;&nbsp;<span id="htxx" style="font-size:14px"> </span><div class="pull-right"><!-- Single button --><div class="btn-group"><button style="position: relative;top:-7px;" type="button" class="btn btn-default"data-toggle="modal" data-target="#myModal">部门展示</button></div><!--  <div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Actions<span class="caret"></span></button><ul class="dropdown-menu pull-right" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></div> --></div></div><!-- /.panel-heading --><div class="panel-body"><div id="morris-line-chart-s" style="width:100%; height:200px;"></div></div><!-- /.panel-body --></div><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bar-chart-o fa-fw"></i>各部门今年、往年合同签订及结算。(往年合同状态为已签) 单位:万元 &nbsp;&nbsp;&nbsp;<div class="pull-right"><button style="position: relative;top:-7px;" type="button" class="btn btn-default"data-toggle="modal" data-target="#myModal2">部门展示</button></div></div><!-- /.panel-heading --><div class="panel-body"><div id="morris-line-chart-depid" style="width:100%; height:200px;"></div></div><!-- /.panel-body --></div><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bullhorn fa-fw"></i> 合同即将结束 但项目还处于施工状态<!-- <div class="pull-right" >  <div class="btn-group"><button type="button" style="border:none;background:none; vertical-align: middle;" onclick="loadMoreTz()">点击查看更多<span class="caret"></span></button></div></div> --></div><div class="panel-body"><div class="row"><div class="col-lg-12"><div class="table-responsive;" <%--style="height: 600px;overflow-y: auto;"--%>><table id="dynamic-table_htxx"  class="table table-bordered table-hover table-striped" ><thead><tr><th style="text-align: center;width: 5%;" class='txt'>序号</th><th style="text-align: center;width: 15%;"  class='txt'>合同名称</th><th style="text-align: center;width: 15%;" class='txt'>甲方单位</th><th style="text-align: center;width: 8%;" class='txt'>合同额-含税(万元)</th><th style="text-align: center;width: 8%;"  class='txt'>合同开始时间</th><th style="text-align: center;width: 8%;"  class='txt'>合同结束时间</th><th style="text-align: center;width: 15%;" class='txt'>项目名称</th><th style="text-align: center;width: 15%;" class='txt'>部门名称</th></tr></thead><tbody id="dynamic-table_zzht"></tbody></table></div></div></div></div></div></div></div><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">选择</h4></div><div class="modal-body" id="depShow">
<%--                                    <div class="checkbox">--%>
<%--                                        <label>--%>
<%--                                            <input type="checkbox"> Remember me--%>
<%--                                        </label>--%>
<%--                                    </div>--%>
<%--                                    <div class="checkbox">--%>
<%--                                        <label>--%>
<%--                                            <input type="checkbox"> Remember me--%>
<%--                                        </label>--%>
<%--                                    </div>--%></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" onclick="reloadChart();" class="btn btn-primary" data-dismiss="modal">确定</button></div></div></div></div><div class="modal fade" id="myModal2" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" >选择</h4></div><div class="modal-body" id="depShow2"><%--                                    <div class="checkbox">--%><%--                                        <label>--%><%--                                            <input type="checkbox"> Remember me--%><%--                                        </label>--%><%--                                    </div>--%><%--                                    <div class="checkbox">--%><%--                                        <label>--%><%--                                            <input type="checkbox"> Remember me--%><%--                                        </label>--%><%--                                    </div>--%></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" onclick="reloadChart2();" class="btn btn-primary" data-dismiss="modal">确定</button></div></div></div></div><script type="text/javascript">function getWillExpireSoonHtxxList(){$.ajax({type: "POST",async: false,url: '<%=basePath%>xmhtxx_ajaxQueryWillExpireSoonHtxxList.action',dataType: "json",success: function(data){$("#dynamic-table_zzht").empty()var json = data;var jlength = data.length;var trHtml = "";for(var i =1 ; i <=jlength ;i++){var hted = json[i-1].HTED;if(hted&&hted!=''){hted = toDecimal(JsDiv(hted,'10000'));}trHtml="<tr>" +"<td hidden style='width: 45px;'>"+json[i-1].PKID+"</td>" +"<td style='width: 30px;text-align: center;'>"+i+"</td>" +"<td style='width: 40px;text-align: left;'>"+json[i-1].HTMC+"</td>" +"<td style='width: 90px;text-align: left;'>"+json[i-1].KHMC+"</td>" +"<td style='width: 90px;text-align: right;'>"+hted+"</td>" +"<td style='width: 70px;text-align: center;'>"+json[i-1].KSSJ+"</td>" +"<td style='width: 70px;text-align: center;'>"+json[i-1].JSSJ+"</td>" +"<td style='width: 70px;text-align: left;'>"+json[i-1].GCMC+"</td>" +"<td style='width: 70px;text-align: left;'>"+json[i-1].XMSSBM+"</td>" +"</tr>"$("#dynamic-table_zzht").append(trHtml);}//console.log($("#dynamic-table_zzxx_tb").find("td").length);for(var i = 0 ;i<$("#dynamic-table_zzht").find("td").length;i++){if($("#dynamic-table_zzht").find("td")[i].textContent=='null'){$("#dynamic-table_zzht").find("td")[i].textContent=0;}}}});}getWillExpireSoonHtxxList()</script>      <div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bullhorn fa-fw"></i>合同下没有项目<!-- <div class="pull-right" >  <div class="btn-group"><button type="button" style="border:none;background:none; vertical-align: middle;" onclick="loadMoreTz()">点击查看更多<span class="caret"></span></button></div></div> --></div><div class="panel-body"><div class="row"><div class="col-lg-12"><div class="table-responsive;" ><table id="dynamic-table_zzxx"  class="table table-bordered table-hover table-striped" ><thead><tr><th style="text-align: center;width: 5%;" class='txt'>序号</th><th style="text-align: center;width: 15%;"  class='txt'>合同名称</th><th style="text-align: center;width: 15%;" class='txt'>甲方单位</th><th style="text-align: center;width: 8%;" class='txt'>合同额度-含税(万元)</th><th style="text-align: center;width: 8%;"  class='txt'>合同开始时间</th><th style="text-align: center;width: 8%;"  class='txt'>合同结束时间</th><th style="text-align: center;width: 8%;" class='txt'>部门名称</th></tr></thead><tbody id="dynamic-table_noxmht"></tbody></table></div></div></div></div></div></div></div><script type="text/javascript" >function getNoXmHtxxList(){$.ajax({type: "POST",async: false,url: '<%=basePath%>xmhtxx_ajaxQueryNoXmHtxxList.action',dataType: "json",success: function(data){$("#dynamic-table_noxmht").empty()var json = data;var jlength = data.length;var trHtml = "";for(var i =1 ; i <=jlength ;i++){var hted = json[i-1].HTED;if(hted&&hted!=''){hted = toDecimal(JsDiv(hted,'10000'));}trHtml="<tr>" +"<td hidden style='width: 45px;'>"+json[i-1].PKID+"</td>" +"<td style='width: 30px;text-align: center;'>"+i+"</td>" +"<td style='width: 40px;text-align: left;white-space:nowrap;'>"+json[i-1].HTMC+"</td>" +"<td style='width: 90px;text-align: left;white-space:nowrap;'>"+json[i-1].KHMC+"</td>" +"<td style='width: 90px;text-align: right;white-space:nowrap;'>"+hted+"</td>" +"<td style='width: 70px;text-align: center;white-space:nowrap;'>"+json[i-1].KSSJ+"</td>" +"<td style='width: 70px;text-align: center;white-space:nowrap;'>"+json[i-1].JSSJ+"</td>" +"<td style='width: 70px;text-align: left;white-space:nowrap;'>"+json[i-1].HTSSBM+"</td>" +"</tr>"$("#dynamic-table_noxmht").append(trHtml);}//console.log($("#dynamic-table_zzxx_tb").find("td").length);for(var i = 0 ;i<$("#dynamic-table_noxmht").find("td").length;i++){if($("#dynamic-table_noxmht").find("td")[i].textContent=='null'){$("#dynamic-table_noxmht").find("td")[i].textContent=0;}}}});}getNoXmHtxxList()</script>      <!-- /.panel --><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-bar-chart-o fa-fw"></i> 重点项目（首页推荐）列表<!-- 右下拉按钮 隐藏线--><div class="pull-right" style="display:none;"><!-- <div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Actions<span class="caret"></span></button><ul class="dropdown-menu pull-right" role="menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></div> --></div></div><!-- /.panel-heading --><div class="panel-body"><div class="row"><div class="col-lg-12"><div class="table-responsive"><!-- datagrid start --><table id="dynamic-table" class="table table-bordered table-hover table-striped"><thead><tr><th style="text-align: center;width: 30px;" >序号</th><th style="text-align: center;width: 40px;">部门</th><th style="text-align: center;width: 90px;" >项目名称</th><th style="text-align: center;width: 70px;">预算材料费</th><th style="text-align: center;width: 70px;">实际材料费</th><th style="text-align: center;width: 70px;">预算人工费</th><th style="text-align: center;width: 70px;">实际人工费</th><th style="text-align: center;width: 60px;">预算机械费</th><th style="text-align: center;width: 60px;">实际机械费</th><th style="text-align: center;width: 120px;" >工作内容</th><th style="text-align: center;width: 120px;" >工作日志</th><th style="text-align: center;width: 80px;" >施工进度</th></tr></thead><tbody></tbody></table><!-- datagrid end --></div><!-- /.table-responsive --></div><!-- /.col-lg-4 (nested) --></div><!-- /.row --></div><!-- /.panel-body --></div><!-- /.panel --></div><!-- /.panel --></div><!-- /.col-lg-4 --></div><!-- /.row --></div><!-- /#page-wrapper --></div><!-- /#wrapper --><script type="text/javascript">//全局depListvar depList=[];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('morris-area-chart'));var option = {tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'line'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '0%',right: '0%',bottom: '0%',top: '5%',containLabel: true},xAxis : [{type : 'category',data : [],axisTick: {alignWithLabel: true}}],yAxis : [{type : 'value'}],series : [{name:'直接访问',type:'bar',barWidth: '60%',data:[]}]
};$(function(){var url = '<%=basePath%>wzbmkc_ajaxQueryGetKchzByDep.action';$.post(url,function(data){var json=eval('('+data+')').rows;var gskchz=0;for(var i=0;i<json.length;i++){gskchz=JsAdd(gskchz,json[i].DJ||'0');}$('#gskchz').html("<i class=\"fa fa-bar-chart-o fa-fw\"></i>各部门实时库存 单位:万元 . 兴通公司总库存:"+gskchz+"万元");depList=json;for(var i=0;i<json.length;i++){option.xAxis[0].data.push(json[i].ORGNA_NAME);option.series[0].data.push(json[i].DJ);}//myChart.点击事件， 循环depList 找idmyChart.on('click', function (params) {var id = "";var bmmc = "";for (var i = 0; i < depList.length; i++) {if (depList[i].ORGNA_NAME == params.name){id = depList[i].BMID;bmmc = depList[i].ORGNA_NAME;break;}}gokcxx(id,bmmc);});// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});});<%-- getHtMessage()function getHtMessage(){$.ajax({url: '<%=basePath%>xmhtxx_ajaxGetHtMessage.action',dataType: "json",success:function(data){debugger;if(data){$('#htxx').html("总合同额度:"+data.ZHTE+"万元;总结算值:"+data.ZJS+"万元;"+"合同份数:"+data.HTFS);}}});}--%></script><script>function reloadChart(){//保存选择结果$("input[id^='dep_']").each(function(){var dep=$(this).attr("id").replace("dep_","");localStorage.setItem("SelectDep_"+dep,this.checked?"1":"0");});var ajaxData = myChart6SoruceDate;var modelData=[];var zhted = 0;var zjsz = 0;for(var i=0;i<ajaxData.length;i++){var et=ajaxData[i];if($("#dep_"+et.KHMC).get(0).checked==false){continue;}modelData.push({"KCJG":et.HTE,"ORGNA_NAME":"合同额","RQ":et.KHMC});modelData.push({"KCJG":et.JSZ,"ORGNA_NAME":"结算额","RQ":et.KHMC});zhted =JsAdd(zhted,et.HTE?et.HTE:0);zjsz  = JsAdd(zjsz,et.JSZ?et.JSZ:0);}$('#htxx').html("总合同额度:"+zhted+"万元;总结算值:"+zjsz+"万元;");setLinesChar(modelData,linecharts,'bar');myChart6.setOption(linecharts);}function reloadChart2(){//保存选择结果$("input[id^='dep2_']").each(function(){var dep=$(this).attr("id").replace("dep2_","");localStorage.setItem("SelectDep2_"+dep,this.checked?"1":"0");});
debugger;var ajaxData = myChart8SoruceDate;var modelData=[];for(var i=0;i<ajaxData.length;i++){var et=ajaxData[i];if($("#dep2_"+et.ORGNA_NAME).get(0).checked==false){continue;}modelData.push({"KCJG":et.SUBJNHTED==0?"":et.SUBJNHTED,"ORGNA_NAME":"今年合同额","RQ":et.ORGNA_NAME});modelData.push({"KCJG":et.JNQDHTJS==0?"":et.JNQDHTJS,"ORGNA_NAME":"今年结算额","RQ":et.ORGNA_NAME});modelData.push({"KCJG":et.SUBWNHTED==0?"":et.SUBWNHTED,"ORGNA_NAME":"往年合同额","RQ":et.ORGNA_NAME});modelData.push({"KCJG":et.WNQDHTJS==0?"":et.WNQDHTJS,"ORGNA_NAME":"往年结算额","RQ":et.ORGNA_NAME});}setLinesChar(modelData,linecharts,'bar');myChart8.setOption(linecharts);}function tzurl(url){//alert(url);//document.forms[0].action= url;//document.forms[0].submit();window.location = "<%=basePath%>"+url;}function more(){var url = "<%=basePath%>mainframe/moreNewsView.jsp?addEnable=true&r="+ Math.random();//var return_value = window.showModalDialog(url,null,"dialogWidth:800px;dialogHeight:450px;help:no;status:no");var return_value = window.showModalDialog(url,null,"dialogWidth:850px;dialogHeight:650px;help:no;status:no");if(return_value!=null&&(typeof(return_value)!="undefined")){window.location = "<%=basePath%>"+ return_value;}}<%-- $(function(){$("#dg").datagrid({url:"<%=basePath%>lcxx_ajaxQueryProcessList.action",//       url:"<%=basePath%>test/test.json",pagination:true,//显示分页pageSize:5,//分页大小pageList:[5,10,15,20],//每页的个数fit:true,//自动补全fitColumns:true,height:100,//title:"",singleSelect:true,toolbar:"#toolbar1",columns:[[{field:'ID',hidden:true,width:100,align:'left',halign:'center'},{field:'DBMC',hidden:true,title:'待办名称',width:100,align:'left',halign:'center',formatter:dbFormatter},{field:'SJ',hidden:true,title:'时间',width:100,align:'left',halign:'center'},{field:'WHR',hidden:true,title:'发起人',width:100,align:'left',halign:'center'}]]});  --%>$.ajax({type: "POST",async: false,url: '<%=basePath%>bbxmxx_ajaxQueryGcxmtzBySS_Mob.action',dataType: "json",success: function(data){var json = data;var jlength = data.rows.length;var trHtml = "";for(var i =1 ; i <=jlength ;i++){var gzrz = json.rows[i-1].GZRZ;if(json.rows[i-1].GZRZ==null){gzrz="未填写";}trHtml="<tr>" +"<td hidden style='width: 45px;'>"+json.rows[i-1].ID+"</td>" +"<td hidden style='width: 45px;'>"+json.rows[i-1].XMID+"</td>" +"<td style='width: 30px;text-align: center;'>"+i+"</td>" +"<td style='width: 40px;text-align: center;'>"+json.rows[i-1].DWMC+"</td>" +"<td style='width: 90px;'>"+json.rows[i-1].GCMC+"</td>" +"<td style='width: 70px;text-align: right;white-space:nowrap;'>"+json.rows[i-1].YSCLF+"</td>" +"<td style='width: 70px;text-align: right;white-space:nowrap;'><a style='font-size:14px;font-family: Verdana, Arial, Helvetica, sans-serif;' href='javascript:goHsmx(\""+json.rows[i-1].XMID+"\")'>"+json.rows[i-1].CLFHZ+"</a></td>" +"<td style='width: 70px;text-align: right;white-space:nowrap;'>"+json.rows[i-1].YSRGF+"</td>" +"<td style='width: 70px;text-align: right;white-space:nowrap;'>"+json.rows[i-1].RGF+"</td>" +"<td style='width: 60px;text-align: right;white-space:nowrap;'>"+json.rows[i-1].YSJXF+"</td>" +"<td style='width: 60px;text-align: right;white-space:nowrap;'>"+json.rows[i-1].JXF+"</td>" +"<td style='width: 120px;'>"+json.rows[i-1].GCNR+"</td>" +"<td style='width: 120px; '><a href='javascript:goJdmx(\""+json.rows[i-1].XMID+"\")'>"+gzrz+"["+json.rows[i-1].RQ+"]</a></td>" +"<td style='width: 80px;'>"+"<div class='progress progress-striped pos-rel' data-percent='"+json.rows[i-1].XMJD+"%'>"+"<div class='progress-bar progress-bar-success' style='width: "+json.rows[i-1].XMJD+"%;'>"+"</div>"+"</div>" +"</td>" +"</tr>"$("#dynamic-table").append(trHtml);}console.log($("#dynamic-table").find("td").length);for(var i = 0 ;i<$("#dynamic-table").find("td").length;i++){if($("#dynamic-table").find("td")[i].textContent=='null'){$("#dynamic-table").find("td")[i].textContent=0;}}}});function refresh(){getZzxx()}//查看进度明细页面function goJdmx(xmid){var url = '<%=basePath%>xmjdxx_goQueryGcxmJdHsxxList.action?xmid='+xmid;$("#window").window({title: "项目进度明细", top: 120, left: 680,autoVCenter: true,autoHCenter: false});$('#window').window('refresh',url);$('#window').window('open');// window.open(url);}//查看核算明细页面function gokcxx(id,bmmc){var url = '<%=basePath%>wzbmkc_gokcmxByDepList.action?depid='+id;window.parent.addTab("", bmmc+"库存信息", url,"icon-hamburg-home", true);}function goPage(name,url){//alert(name+"-"+url+"-"+icon)var url = '<%=basePath%>'+url;window.parent.addTab("", name, url,"icon-hamburg-home", true);}function tzurl(url){if(url && url.indexOf('?')>0){url += "&r="+Math.random();}else{url += "?r="+Math.random();}$('#dlg').dialog('refresh',url).dialog('open').dialog('setTitle','审核');//window.open(url);//$('#dlg').dialog('open').dialog('setTitle','编辑工程项目');}function dbFormatter(value,row,index){var html = [];if(row.URL){//SSUMMARYhtml.push('<a title="[办理]" href="javascript:void(0)" onClick="javascript:tzurl(\'' + row.URL + '\');">');html.push(value);html.push('</a>');}else{return value;}return html.join('');}//查看核算明细页面function goHsmx(xmid){lx='';var url = '<%=basePath%>xmhsxx_goQueryGcxmClfHsxxList.action?xmid='+xmid+'&lx='+lx;//$('#dlg').dialog('refresh',url).dialog('open').dialog('setTitle','项目核算明细');/*   $('#dlg').dialog({title: "项目核算明细", top: 120, left: 160,maximizable: true,autoRestore: true});  */$("#window").window({title: "项目核算明细", top: 120, left: 500,autoVCenter: true,autoHCenter: false});$('#window').window('refresh',url);$('#window').window('open');// window.open(url);}function goEditZz(pkid){var url = '<%=basePath%>userbaseinfoZj_goQueryUserBaseInfoZzList.action?pkid='+pkid;window.parent.addTab("", "证件信息", url,"icon-hamburg-home", true);}var myChart7 = echarts.init(document.getElementById('morris-line-chart'));var myChart6 = echarts.init(document.getElementById('morris-line-chart-s'));var myChart6SoruceDate=[];var myChart8 = echarts.init(document.getElementById('morris-line-chart-depid'));var myChart8SoruceDate=[];var linecharts = {grid:{ x:40,y:22,x2:22,y2:22},tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c}万元"},xAxis: {type: 'category',},yAxis: {type: 'value',scale:true},label: {normal: {show: true,position: 'top',textStyle: {color: 'black'}}},series: []};$.ajax({url:"<%=basePath%>wzbmkc_ajaxQueryWzCRKInfo.action",success:function(data){var ajaxData = JSON.parse(data);var modelData=[];for(var i=0;i<ajaxData.length;i++){var et=ajaxData[i];modelData.push({"KCJG":et.CK,"ORGNA_NAME":"出库","RQ":et.CKNY});modelData.push({"KCJG":et.RK,"ORGNA_NAME":"入库","RQ":et.CKNY});}setLinesChar(modelData,linecharts,'line');//setLinesChar(dataArr,linecharts);myChart7.setOption(linecharts);}});$.ajax({url:"<%=basePath%>xmhtxx_ajaxQueryHtJsInfo.action",success:function(data){var ajaxData = JSON.parse(data);var modelData=[];var zhted = 0;var zjsz = 0;myChart6SoruceDate=ajaxData;for(var i=0;i<ajaxData.length;i++){var et=ajaxData[i];modelData.push({"KCJG":et.HTE,"ORGNA_NAME":"合同额","RQ":et.KHMC});modelData.push({"KCJG":et.JSZ,"ORGNA_NAME":"结算额","RQ":et.KHMC});zhted =JsAdd(zhted,et.HTE?et.HTE:0);zjsz  = JsAdd(zjsz,et.JSZ?et.JSZ:0);}$('#htxx').html("总合同额度:"+zhted+"万元;总结算值:"+zjsz+"万元;");setLinesChar(modelData,linecharts,'bar');//setLinesChar(dataArr,linecharts);myChart6.on('click',param=>{var {name,seriesName} = param;var url = '<%=basePath%>xmhtxx_goQueryHtList.action?lb=1';if(seriesName=='合同额'){url = url+'&jfdwmc='+name;}else{url = url+'&jfdwmc='+name+'&jszt=1';}window.parent.addTab("", "合同信息", url,"icon-hamburg-home", true);});//myChart6.setOption(linecharts);var html ="";for (var i=0;i< linecharts.xAxis.data.length;i++){var dep=linecharts.xAxis.data[i];var select = localStorage.getItem("SelectDep_"+dep)=="0"?"":"checked=\"true\"";html +=" <div class=\"checkbox\">\n" +"    <label>\n" +"      <input "+select+" type=\"checkbox\" id=\"dep_"+dep+"\" value=\""+dep+"\"> "+dep+"\n" +"    </label>\n" +"  </div>";}$("#depShow").html(html).append("<div style='clear: both;'></div>");reloadChart();}});$.ajax({url:"<%=basePath%>xmhtxx_ajaxGetHtMessageByDepId.action",success:function(data){var ajaxData = JSON.parse(data);myChart8SoruceDate=ajaxData;var modelData=[];for(var i=0;i<ajaxData.length;i++){var et=ajaxData[i];modelData.push({"KCJG":et.SUBJNHTED==0?"":et.SUBJNHTED,"ORGNA_NAME":"今年合同额","RQ":et.ORGNA_NAME});modelData.push({"KCJG":et.JNQDHTJS==0?"":et.JNQDHTJS,"ORGNA_NAME":"今年结算额","RQ":et.ORGNA_NAME});modelData.push({"KCJG":et.SUBWNHTED==0?"":et.SUBWNHTED,"ORGNA_NAME":"往年合同额","RQ":et.ORGNA_NAME});modelData.push({"KCJG":et.WNQDHTJS==0?"":et.WNQDHTJS,"ORGNA_NAME":"往年结算额","RQ":et.ORGNA_NAME});}setLinesChar(modelData,linecharts,'bar');myChart8.on('click',function(param){var url = '<%=basePath%>xmhtxx_goQueryHtList.action?lb=1';var {name,seriesName} = param;if(seriesName==="今年合同额"||seriesName==="今年结算额"){url = url+"&searchType=1&orgName="+name;                   }else if(seriesName==="往年合同额"||seriesName==="往年结算额"){url = url+"&searchType=2&orgName="+name;}window.parent.addTab("", "合同结算信息", url,"icon-hamburg-home", true);})//myChart8.setOption(linecharts);var html ="";for (var i=0;i< linecharts.xAxis.data.length;i++){var dep=linecharts.xAxis.data[i];var select = localStorage.getItem("SelectDep2_"+dep)=="0"?"":"checked=\"true\"";html +=" <div class=\"checkbox\">\n" +"    <label>\n" +"      <input "+select+" type=\"checkbox\" id=\"dep2_"+dep+"\" value=\""+dep+"\"> "+dep+"\n" +"    </label>\n" +"  </div>";}$("#depShow2").html(html).append("<div style='clear: both;'></div>");reloadChart2();}});//多图表char-数据源-图标配置对象function setLinesChar(ajaxData,option,ctype){//日期数组var dateArray=[];//部门数组var depArray=[];for(var i=0;i<ajaxData.length;i++){dateArray.push(ajaxData[i].RQ);depArray.push(ajaxData[i].ORGNA_NAME);}//数组去重dateArray=uniq(dateArray);depArray=uniq(depArray);option.legend = {data:depArray};option.tooltip={trigger: 'axis'};//Y轴模型数组var yETArray=[];//循环部门for(var i=0;i<depArray.length;i++){var dep=depArray[i];//实体var et={ name:dep, data: [], type: ctype,  itemStyle : { normal: {label : {show: true}}}};//if(depArray.length==1){ bar/* et.label= {normal: {show: true,position: 'top'}};*///}//循环天for(var j=0;j<dateArray.length;j++){var date=dateArray[j];//根据天和部门获取数值et.data.push(getKCJG(dep,date,ajaxData));}yETArray.push(et);}//X轴option.xAxis.data=dateArray;//Y轴option.series=yETArray;}//列表查询-部门-日期-数据源function getKCJG(dep,date,dbArray){var kcjg=0;for(var i=0;i<dbArray.length;i++){var db=dbArray[i];if(db.RQ==date && db.ORGNA_NAME==dep){kcjg=db.KCJG;break;}}return kcjg;}//数组去重function uniq(array){var temp = []; //一个新的临时数组for(var i = 0; i < array.length; i++){if(temp.indexOf(array[i]) == -1){temp.push(array[i]);}}return temp;}</script>
</body></html>
Echar柱状堆叠图X轴自定义显示功能相关推荐

echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
用Python pyecharts v1.x 绘制图形（一）:柱状图、柱状堆叠图、条形图、直方图、帕累托图、饼图、圆环图、玫瑰图
文章目录关于pyecharts 柱状图堆叠柱状图条形图直方图帕累托图(复合图) 饼图圆环图玫瑰图下一节关于pyecharts pyecharts是一个用于生成echart(百度开源的 ...
python pyecharts Bar柱状堆叠图
柱状堆叠图,适合两个商家直接比较 attr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋" ...
echarts入门常用图表（柱状堆叠图）
echarts堆叠图柱状图的核心代码是在series中设置stack,拿官网的示例来讲,stack里内容相同的为一组堆叠效果图步骤步骤一:引入echarts.js <script src= ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
使用 D3.js 创建柱状堆积图
柱状堆积图项目地址使用 D3.js 创建的图表: 使用 D3.js 创建根据值域颜色渐变的地图 D3.js 中动态计算 x 轴 y 轴的宽度以及偏移量在 Ember.js 项目中由浅入深使用 D ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
一.图表布局条形(柱状)图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例.SwiftUI 对探索不同布局和预览实时视图结果是很友好的,很容易将部分内容提取到子视图中,以便每个部分都很 ...
如何展现两极化数据，Excel柱状断层图不二之选
点赞再看,养成习惯:至长反短,至短反长. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...
Echar柱状堆叠图X轴自定义显示功能

Echar柱状堆叠图X轴自定义显示功能相关推荐

最新文章

热门文章
