Echar 制作图表+查询数据

xiaoxiao2022-06-29 50

为了表达作为一个弱小程序员可望而不可即的很多事情~~~摸索了4天~~~被shift哥1小时搞定的查询+echar数据显示，立马秒得渣都不剩~~~

其实我还没完全懂啊~~~╮(╯▽╰)╭。。。只能说哎，作为一只^(*￣(oo)￣)^一样的队友~~还是不要拖后腿。。好好学习颠颠向上，才不浪费shitf哥的苦心教导。。。

DateUtil.java 文件当中加了个日期查询：

/** * 运算日期，返回当前时间之后的Integer为正数，返回当前时间之前的Integer为负数 * @param date Integer * @param year Integer * @param month Integer * @param day Integer * @param hours Integer * @param minute Integer * @return Date 返回运算日期 */ public static Date countDate(Date date, Integer year, Integer month, Integer day, Integer hours, Integer minute) { Calendar calendar = Calendar.getInstance(); calendar.setTime(date); calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) + year);//年相加 calendar.set(Calendar.MONTH, calendar.get(Calendar.MONTH) + month);//月相加 calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) + day);//日相加 calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) + hours);//小时相加 calendar.set(Calendar.MINUTE, calendar.get(Calendar.MINUTE) + minute);//分钟相加 return calendar.getTime(); }

//自己写了个，传入时间的查询类，底层已经写好，剩下调用这种东西还是比较轻松的。但是自己也是用来蛮长时间才搞清楚，配置要加getter和setter方法。。。不然系统根本找不到property。。。这个自己折腾了起码3、4个小时，被zhong少一语点破~~真是伤心，(；′⌒`)。。。很简单的问题

VoiceInfoSingleTitleGroupByDates.java

@QueryInfo(select="voiceTitle.voiceInfoDiscoverDate,count(voiceTitle.infoSingleTitleId) " ,from = "com.spower.voice.valueobject.VoiceInfoSingleTitle as voiceTitle" ,groupBy="voiceTitle.voiceInfoDiscoverDate") public class VoiceInfoSingleTitleGroupByDates extends BaseCommandInfo { @QueryParam(fieldName = "voiceTitle.voiceInfoDiscoverDate",op = QueryOperator.GT_EQU) private Date voiceInfoDiscoverStartDate; // 收录时间 @QueryParam(fieldName = "voiceTitle.voiceInfoDiscoverDate",op = QueryOperator.LESS_EQU) private Date voiceInfoDiscoverEndDate; // 收录时间 // @QueryParam(fieldName = "voiceTitle.voiceInfoTitle", op = QueryOperator.LIKE) // private String voiceInfoTitle; @QueryParam(fieldName = "voiceTitle.infoSingleTitleId") private Long infoSingleTitleId; @QueryParam(fieldName = "voiceTitle.infoId") private Long infoId; /** 默认查询时间段 */ private String queryDateType; /** * @return the infoSingleTitleId */ public Long getInfoSingleTitleId() { return infoSingleTitleId; } /** * @param infoSingleTitleId the infoSingleTitleId to set */ public void setInfoSingleTitleId(Long infoSingleTitleId) { this.infoSingleTitleId = infoSingleTitleId; } /** * @return the infoId */ public Long getInfoId() { return infoId; } /** * @param infoId the infoId to set */ public void setInfoId(Long infoId) { this.infoId = infoId; } /** * @return the voiceInfoDiscoverStartDate */ public Date getVoiceInfoDiscoverStartDate() { return voiceInfoDiscoverStartDate; } /** * @param voiceInfoDiscoverStartDate the voiceInfoDiscoverStartDate to set */ public void setVoiceInfoDiscoverStartDate(Date voiceInfoDiscoverStartDate) { this.voiceInfoDiscoverStartDate = voiceInfoDiscoverStartDate; } /** * @return the voiceInfoDiscoverEndDate */ public Date getVoiceInfoDiscoverEndDate() { return voiceInfoDiscoverEndDate; } /** * @param voiceInfoDiscoverEndDate the voiceInfoDiscoverEndDate to set */ public void setVoiceInfoDiscoverEndDate(Date voiceInfoDiscoverEndDate) { this.voiceInfoDiscoverEndDate = voiceInfoDiscoverEndDate; } }

//至于service，也没写多少，倒是在group by.having这里纠结了许久

VoiceInfoSingleTitleService.java

@Service public class VoiceInfoSingleTitleService extends AbstractAnnoCommonService { /* * 查询过滤采集的统计量，根据日期统计每天的采集量 * select voice_info_discover_date,count(*) from voice_info_single_title group by voice_info_discover_date;// * */ @Transactional public List<Object [ ]> findListVoiceInfoSingleTitle(VoiceInfoSingleTitleGroupByDates info) { IQueryObject qo = super.getQueryObject(info); return super.executeSql(qo.getQueryString(), qo.getParam()); }

}

// voiceshowmapcontroller。。。。于页面交互的controller界面，具体还是操作，shift哥加了个判断，总算有点茅塞顿开的感觉。。。

@Controller @RequestMapping(value = "/voice/") public class VoiceShowMapController extends AbstractAnnotationController{

//虽然我也没明白注入是什么意思 @Autowired private BulletinCommonService bulletinCommonService; @Autowired private BulletinSectionCharService bulletinSectionCharService; @Autowired private BulletinSectionService bulletinSectionService; @Autowired private BulletinCharService bulletinCharService; @Autowired private CharCountService CharCountService; @Autowired public VoiceInfoSingleTitleService VoiceInfoSingleTitleService; /**进入页面,直接生成图片**/ @RequestMapping("/getVoiceShowMap.do") public ModelAndView getVoiceShowMap(HttpServletRequest request,HttpServletResponse response, VoiceInfoSingleTitleGroupByDates voiceInfo) { Map<String, Object> model = new HashMap<String, Object>();

//时间的判断 if (null == voiceInfo.getVoiceInfoDiscoverStartDate() && null == voiceInfo.getVoiceInfoDiscoverEndDate()) { voiceInfo.setVoiceInfoDiscoverStartDate(DateUtil.countDate(new Date(), 0, 0, -5, 0, 0)); voiceInfo.setVoiceInfoDiscoverEndDate(new Date()); }

//查询数据 List<Object []> singleTitleResult=VoiceInfoSingleTitleService.findListVoiceInfoSingleTitle(voiceInfo); model.put("voiceInfo", voiceInfo); model.put("singleTitleResult", singleTitleResult);

//返回页面 return new ModelAndView("/voice/voiceShowMap/VoiceShowMap",model); }

}

//最后才是页面的内容，重点还是数据传值，这个调花的时间最久~~~~伤心的就是，调了很久还不一定能调对。。。。

重点：输出数据的foreach

#foreach($Data in $singleTitleResult) #if( $!{velocityCount} > 1) , "$!{Data[1]}" #else "$!{Data[1]}" #end #end

整个页面的主要：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>${ApplicationProperties.appTitle}</title> <link rel="stylesheet" type="text/css" href="../app/right/right.css"> <script language="JavaScript" src="../script/common.js"></script> <script type="text/javascript" src="../script/validator.js"></script> <script src="../jquery/jquery-1.10.2.min.js"></script> <script src="../jquery/jquery.tmpl.min.js"></script> <script language="JavaScript" src="../base/js/autoform.js"></script> <script language="JavaScript" src="../script/common.js"></script> <link rel="stylesheet" type="text/css" href="../app/right/form.css"/> <link href="../script/DHTML_calendar_style.css" rel="stylesheet" type="text/css" media="all" title="calendar_style" /> <script language="JavaScript" type="text/javascript" src="../script/DHTML_calendar.js"></script> <script type="text/javascript" src="../script/validator.js"></script> <script type="text/javascript" src="../script/selectStaff.js"></script> <script src="../script/cc.selector.js"></script> <script type="text/javascript" src="../base/js/swfupload/swfupload.js"></script> <script type="text/javascript" src="../base/js/swfupload/swfupload_handlers.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> #parse("common/tableRulerJS.vm") <script language=javascript > window.onload = function () { #if($singleTitleResult && $singleTitleResult.size() <= 0) return; #end //------------------------------------折线图------------------------------------- // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/line' // 使用折线图就加载line模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('echartSeries')); var option = { title : { text: '一周舆情变化', }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, ## data : ['周一','周二','周三','周四','周五','周六','周日'] data:[ #foreach($Data in $singleTitleResult) #if( $!{velocityCount} > 1) , "#displayOnlyDate($!{Data[0]})" #else "#displayOnlyDate($!{Data[0]})" #end #end ] } ], yAxis : [ { type : 'value', boundaryGap : false, data : [ #foreach($Data in $singleTitleResult) #if( $!{velocityCount} > 1) , "$!{Data[1]}" #else "$!{Data[1]}" #end #end ] } ], //最低气温 series : [ { name:'舆情趋势', type:'line', data:[ #foreach($Data in $singleTitleResult) #if( $!{velocityCount} > 1) , "$!{Data[1]}" #else "$!{Data[1]}" #end #end ], markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); } function searchMap(){ var flag= true; if(flag){ var e = document.searchForm; e.action = "../voice/getVoiceShowMap.do"; e.submit(); } else { alert("请选择查询时间查询图表内容！！"); } } $(function(){ $("#checkAll").click(function(){ var checkedFlag = $(this).is(':checked'); $("input[name=infoSingleTitleId]").each(function(){ checkedFlag?$(this).attr('checked','checked'):$(this).removeAttr('checked'); }); }); $("div[class=tableContainer]").width($(document).width()); $('label').click(function(){ var radioId = $(this).attr('name'); $('label').removeAttr('class') && $(this).attr('class', 'checked'); $('input[name="voiceInfoMetaType"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked'); }); }); function exportXls(){ var e = document.voiceQueryForm; e.action = e.action+"?type="+'$!{type}'; if (validator.checkAll()) { e.submit(); } } </script> </head> <body scroll="yes" onload =""> <table cellpadding="0" cellspacing="0" class="over_tab"> <tr> <td> <div id="dymenu" class="dymenu"> <A href="#" class="index"><SPAN>舆情图表</SPAN></A> </div> </td> </tr>  <tr valign="top"> <td> <fieldset class="search_border"> <legend class="search_title"><img src="../app/right/images/search_ico.gif" border="0" align="absmiddle"> 查询</legend> <table width="100%" style="margin:0px;cellpadding:0px;cellspacing=0px;">  <form name="searchForm" action="" method="post" > <tr style="text-align:center;" class="tr_font"> </tr> <tr style="text-align:center;" class="tr_font"> <td width="10%" align="right"></td> <td width="50%" align="left">舆情监测系统采集数量统计图</td> </tr> <tr style="text-align:center;" class="tr_font"> <td align="right" >采集日期</td> <td align="left"> #datetimePicker("voiceInfoDiscoverStartDate" "#displayOnlyDate($!{voiceInfo.voiceInfoDiscoverStartDate} )" "" 15) #datetimePicker("voiceInfoDiscoverEndDate" "#displayOnlyDate($!{voiceInfo.voiceInfoDiscoverEndDate})" "" 15) </td> </tr> <tr style="text-align:center;line-height:7px;" class="tr_font"> <td colspan="8"> #qbutton('search.png', '确定查询图表', 'javascript:searchMap()') #qbutton('clean.png', '清空', 'javascript:clearQueryCondition(document.voiceQueryForm)') </td> </tr> </form> </table> </fieldset> </td> </tr>  <div style="overflow:scroll;height=500px；"> <tr valign="top" style="height=500px；overflow:scroll;"> <td width="100%" height="100%"> <table cellpadding="0" cellspacing="0" class="roll_tab" style="height=500px；overflow:scroll;"> <tr> <td>  <div id="echartSeries" style="width:100%;height:300px" style="overflow:scroll;"></div> </td> </tr> <tr> <td>  <div id="echartBar" style="width:100%;height:300px" style="overflow:scroll;"></div> </td> </tr> <tr> <td>  <div id="echartPie" style="width:100%;height:300px"></div> </td> </tr> </table> </td> </tr> </div>  #if($page)  <tr valign="top" height="100%"> <td> #changePage($page "#getRequestUri()") </td> </tr>  #end </table> </body> <script> </script> </html>

感谢百度echar.......

http://echarts.baidu.com/tutorial.html#ECharts 特性介绍

转载请注明原文地址: https://ju.6miu.com/read-1124775.html

专利

最新回复(0)