Echar 制作图表+查询数据

为了表达作为一个弱小程序员可望而不可即的很多事情~~~摸索了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 >

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

Echar 制作图表+查询数据相关推荐

WPF中嵌套charts图表查询数据
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:WPF .Charts 撰写日期:2020年09月16 ...
如何用excel制作图表?
Excel是一个非常强大的电子表格软件,其中包含了很多绘制图表的功能.下面是一些基本步骤,可以帮助你用Excel制作图表: 打开Excel并输入数据.在Excel中,首先需要输入需要制作图表的数据.可 ...
查询数据抓取网站数据_有了数据，我就学会了如何在几个小时内抓取网站，您也可以...
查询数据抓取网站数据 I had a shameful secret. It is one that affects a surprising number of people in the da ...
Qt使用ChartDirector插件制作图表
最近做的一个项目需要在界面上画出多个图表对数据进行分析,经过同事的推荐,我使用ChartDirector这个插件.对于ChartDirector我就不多做介绍,不知道的直接网上百度一下即可,Qt安装和 ...
OpenTSDB 查询数据
文章目录 Querying or Reading Data Query Components Times Filters Aggregation Downsampling Rate Order of ...
查python的软件_[Python实战]Python制作天气查询软件
以前,公众号分享了如何使用 PyQt5 制作猜数游戏和计时器,这一次,我们继续学习:如何使用 PyQt5 制作天气查询软件. 开发环境Python3 PyQt5 requests 准备工作首先要获取 ...
数据库 ogm_带有Hibernate OGM的NoSQL –第二部分：查询数据
数据库 ogm Hibernate OGM的第一个最终版本发布于 1月底,团队一直在忙于制作一系列教程式博客,使您有机会轻松地从Hibernate OGM重新开始. 第一部分是关于设置和保留您的第一个 ...
带有Hibernate OGM的NoSQL –第二部分：查询数据
1月底发布了Hibernate OGM的第一个最终版本之后,团队一直在忙于制作一系列教程式博客,使您有机会轻松地从Hibernate OGM重新开始. 第一部分是关于设置和保留您的第一个实体 . 在第 ...
数据库语言数据查询_使用这种简单的查询语言开始查询数据
数据库语言数据查询 Working with data is becoming an increasingly important skill in the modern workplace. 在现 ...

Echar 制作图表+查询数据

Echar 制作图表+查询数据相关推荐

最新文章

热门文章