功能描述

  • 带时间段查询条件,选择时间则异步刷新图表,使用的时间控件为 WdatePicker
  • 柱状图横轴文字超长进行了处理,可以支持文字纵排或横排并换行显示。
  • 支持点击柱状图弹出新的页面,并且支持携带除横纵坐标上的相关信息外的其他信息。
  • echarts异步查询数据和刷新demo,并具有一定的公用性和借鉴性。
  • 异步加载后台数据

效果图

echarts3柱状图统计功能DEMO

关键代码

  • 时间查询条件代码
<td class="td_text" align="right" width="20%">时间段:</td>
<td class="td_input" align="left" width="30%">
<input type="text" name="q_CJSJS" id="q_CJSJS" style="width: 110px;"
class="time_Input inputDate" value="${requestScope.q_CJSJS}"
onchange="return checkValid(this, '1')" class="inputDate" onclick="WdatePicker({isShowWeek:true,maxDate:'#F{$dp.$D(\'q_CJSJE\')}'
,onpicking:function(dp){this.value=dp.cal.getNewDateStr();createEchart();}})" />
~
<input type="text" name="q_CJSJE" id="q_CJSJE" style="width: 110px;"
class="time_Input inputDate" value="${requestScope.q_CJSJE}"
onchange="return checkValid(this, '1')" class="inputDate" onclick="WdatePicker({isShowWeek:true,minDate:'#F{$dp.$D(\'q_CJSJS\')}'
,onpicking:function(dp){this.value=dp.cal.getNewDateStr();createEchart();}})" />
</td>
  • js相关代码
<script src="${ctx}/scripts/plugin/echarts3.1.10/echars.js"></script>
<script type="text/javascript">
var jsonData = null;
var myChart = null;
createEchart();
/**查询数据*/
function createEchart(){
if(null != myChart){
myChart.setOption(getOption());
}else{
var chart = $("#main").echarts(getOption());
myChart=chart.getEchart();
// 处理点击事件并且条状到相应的百度搜索页面
myChart.on('click', function (params) {
//获取时间
var start = $("#q_CJSJS").val();
var end = $("#q_CJSJE").val();
//得到数据索引
var typeid = jsonData.typeid[params.dataIndex];
LayerTool.show('立案登记',ctx + '/pages/ebcm/business/xzcf/tjfx/wflxtj/TXzcfLadjList.jsp?AJLX='
+ typeid + "&start=" + start + "&end=" + end,true,false);
});
}
}
function getOption(){
//获取时间
var start = $("#q_CJSJS").val();
var end = $("#q_CJSJE").val();
$.ajax({
url:ctx + '/pages/ebcm/business/xzcf/tjfx/wflxtj/wflxtjProcessor.jsp',
type:'POST',
async:false,
dataType:"JSON",
data : {method:"getNumByAjlx",start:start,end:end},
success:function(data){
jsonData = data;
}
});
var option = {
color: ['#fea05b'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
axisLabel: {
interval:0,//横轴信息全部显示
},
data : jsonData.typename,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [{
name:'违法数',
type:'bar',
barWidth:20,
data: jsonData.num
}]
};
return option;
}
</script>
  • 相关后台代码
/**
*根据违法类型分类查询数据
*/
private void getNumByAjlx(HttpServletRequest request, HttpServletResponse response){
QueryHelper helper=new QueryHelper();
JSONObject json = new JSONObject();
//获取开始时间和结束时间
String start = request.getParameter("start");
String end = request.getParameter("end");
try{
JdbcDAO dao=new JdbcDAO();
StringBuffer sb = new StringBuffer(400);
sb.append(" SELECT DMNR TYPENAME,DM TYPEID,COUNT(AJLX) NUM ");
sb.append(" FROM T_COMN_GGDMZ GGDMZ ");
sb.append(" LEFT JOIN T_XZCF_LADJ LADJ ");
sb.append(" ON GGDMZ.DM = LADJ.AJLX ");
if(null != start && !"".equals(start)){
sb.append(" AND LADJ.LASJ >= U_POWER.p_To_Date(? ,'yyyy-MM-dd') ");
helper.addParameter(start);
}
if(null != end && !"".equals(end)){
sb.append(" AND LADJ.LASJ <= U_POWER.p_To_Date(? ,'yyyy-MM-dd') ");
helper.addParameter(end);
}
sb.append(" WHERE DMJBH = 'XZCF_LADC_AJLX' ");
sb.append(" GROUP BY DMNR,DM,GGDMZ.PXM ORDER BY GGDMZ.PXM ASC ");
helper.setHql(sb.toString());
List<DynaBean> dataList= dao.getListValue(null, helper);
String[] typenameArr = new String[dataList.size()];
String[] typeidArr = new String[dataList.size()];
Integer[] numArr = new Integer[dataList.size()];
 
for(int i = 0;i < dataList.size();i++){
DynaBean bean = dataList.get(i);
String typename = BeanUtils.getProperty(bean, "TYPENAME");
//文字太长了显示不了需要对type添加换行符
StringBuffer str = new StringBuffer(typename);
int length = str.length();
for(int j = 0;j < length / 4;j++){
str.insert((j + 1) * 4, "\n");
}
typename = str.toString();
String typeid = BeanUtils.getProperty(bean, "TYPEID");
int num = BeanUtils.getInteger(bean, "NUM");
typenameArr[i] = typename;
typeidArr[i] = typeid;
numArr[i] = num;
}
json.put("num", numArr);
json.put("typename", typenameArr);
json.put("typeid", typeidArr);
}catch(Exception e){
log.error("ajax出错:" + e.getMessage());
}finally{
try{
response.getWriter().print(json.toString());
}catch(Exception e1){
e1.printStackTrace();
}
}
}

备注:以上只是一个案例代码,可能有些地方写的不是很规范或者书写方式比较low比如是用jsp写的后台,请直接过滤掉。

如果决定博客对你有帮助,欢迎前来一起分享博客。

浏览 971 评论 0 赞 0 砸 0 标签: demo echarts
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款