Echar 制作图表+查询数据

来源：互联网发布：最强网络神豪txt下载编辑：程序博客网时间：2024/04/29 03:55

为了表达作为一个弱小程序员可望而不可即的很多事情~~~摸索了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%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D

0 0