Echar make charts + query data

struggle In order to express a lot of things that a weak programmer can't hope for~~~ I have been exploring for 4 days~~~ The query that was done by shift brother in 1 hour + echar data shows that there is no slag left in seconds~~~ pitful

Actually, I don't fully understand it yet~~~╮(╯▽╰)╭. . . All I can say is, hey, as a teammate like ^(*￣(oo)￣)^~~ still don’t hold back. . Study hard and go up, so you don't waste brother shitf's painstaking teaching. . .

A date query is added to the DateUtil.java file:

/**
* Calculates the date, returns a positive Integer after the current time, and returns a negative Integer before the current time
* @param date Integer
* @param year Integer
* @param month Integer
* @param day Integer
* @param hours Integer
* @param minute Integer
* @return Date returns the operation 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);//year addition
calendar.set(Calendar.MONTH, calendar.get(Calendar.MONTH) + month);/ /moon addition
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();
}

//I wrote a query class for passing in time, the bottom layer has been written, and it is relatively easy to call this kind of thing. But I also used it for a long time to figure out, and the configuration needs to add getter and setter methods. . . Otherwise, the system cannot find the property at all. . . This tossed me for at least 3 or 4 hours, and was broken by Zhong Shao's words~~ Really sad, (;'⌒`). . . very simple question

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; // Recording time

@QueryParam(fieldName = "voiceTitle.voiceInfoDiscoverDate",op = QueryOperator.LESS_EQU)
private Date voiceInfoDiscoverEndDate; // Recording time

// @QueryParam(fieldName = "voiceTitle.voiceInfoTitle", op = QueryOperator.LIKE)
// private String voiceInfoTitle;

@QueryParam(fieldName = "voiceTitle.infoSingleTitleId")
private Long infoSingleTitleId;

@QueryParam(fieldName = "voiceTitle.infoId")
private Long infoId;

/** Default query time period*/
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;
}

}

//As for service, I haven't written much, but I have been tangled in group by.having for a long time.

VoiceInfoSingleTitleService.java

@Service
public class VoiceInfoSingleTitleService extends AbstractAnnoCommonService {
/*
* Query to filter the collected statistics and count the daily collection according to the date
* 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. . . . Regarding the controller interface of page interaction, the specific operation is still the operation. Brother Shift made a judgment, and it finally felt a bit of a sluggish feeling. . .

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

//Although I don't understand what injection means
@Autowired
private BulletinCommonService bulletinCommonService;
@Autowired
private BulletinSectionCharService bulletinSectionCharService;
@Autowired
private BulletinSectionService bulletinSectionService;
@Autowired
private BulletinCharService bulletinCharService;
@Autowired
private CharCountService CharCountService;
@Autowired
public VoiceInfoSingleTitleService VoiceInfoSingleTitleService;

/**Enter the page, directly generate the picture**/
@RequestMapping("/getVoiceShowMap.do")
public ModelAndView getVoiceShowMap(HttpServletRequest request,HttpServletResponse response, VoiceInfoSingleTitleGroupByDates voiceInfo) {
Map<String, Object> model = new HashMap<String, Object>();

// judgement of time
if (null == voiceInfo.getVoiceInfoDiscoverStartDate() && null == voiceInfo.getVoiceInfoDiscoverEndDate()) {
voiceInfo.setVoiceInfoDiscoverStartDate(DateUtil.countDate(new Date(), 0, 0, -5, 0, 0));
voiceInfo.setVoiceInfoDiscoverEndDate(new Date());
}

//Query data
List<Object []> singleTitleResult=VoiceInfoSingleTitleService.findListVoiceInfoSingleTitle(voiceInfo);
model.put("voiceInfo", voiceInfo);
model.put("singleTitleResult", singleTitleResult);

//Return to the page
return new ModelAndView("/voice/voiceShowMap/VoiceShowMap",model);
}

}

//The last is the content of the page, the focus is on data transmission, this adjustment takes the longest time ~~~~ Sadly, it may not be able to be adjusted correctly after a long time of adjustment. . . .

Key point: foreach that outputs data

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

The main of the whole page:

<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
//--- ---------------------------------line chart--------------- ----------------------
// Path configuration
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist '
}
});
// Use
require(
[
'echarts',
'echarts/chart/line' // Load the line module when using a line chart, load on demand
],
function (ec) {
// Based on the prepared dom, initialize the echarts chart
var myChart = ec.init(document.getElementById('echartSeries'));

var option = {
title : {
text: 'One week public opinion change',
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
## data : ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
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 : 'average'}
]
}
}
]

};

// Load data for echarts object
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>

Thanks Baidu echar.....

http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D

Echar make charts + query data

Guess you like