echarts柱状图，动态统计
echarts柱状图，动态统计
前言
最近在做一个统计短信发送的功能，前端用到echarts的柱状图，发篇文记录学习一下。
前端需要引用的文件
我在项目中引入了echarts.js和jquery.min.js两个js文件，以及一个样式文件oaui.css，样式文件主要是用来控制下拉选择框以及按钮的样式。
先看效果图
前端jsp代码
<%@ page import="com.xjj.oa2015.common.utils.StringUtils" %>
<%@ page import="java.util.Calendar" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/js/echarts.js"></script>
<script src="/jquery/1.9.1/jquery.min.js"></script>
<link href="/css/oaui.css" rel="stylesheet">
<style>
html, body{
height: 98%;
background-color: white;
}
</style>
<%
Calendar cale = Calendar.getInstance();
int year = cale.get(Calendar.YEAR);
int mh = cale.get(Calendar.MONTH) + 1;
String isYearView = request.getParameter("isYearView");
String y = request.getParameter("year");
if(StringUtils.isEmpty(y)){
y=String.valueOf(year);
}
String m = request.getParameter("month");
if(StringUtils.isEmpty(m)){
m=String.valueOf(mh);
}
%>
</head>
<body>
<div <%if ("1".equals(isYearView)) {%>style="display: inline-block;margin-left: 6px"<%}else{%>style="display:none"<%}%>>
年份选择：
<select name="selectYear" id="selectYear" onchange="changYear()">
<option value="<%=year%>" <%if(String.valueOf(year).equals(y)){%>selected<%}%> ><%=year%>年
</option>
<option value="<%=year-1%>" <%if(String.valueOf(year-1).equals(y)){%>selected<%}%> ><%=year - 1%>年
</option>
<option value="<%=year-2%>" <%if(String.valueOf(year-2).equals(y)){%>selected<%}%> ><%=year - 2%>年
</option>
<option value="<%=year-3%>" <%if(String.valueOf(year-3).equals(y)){%>selected<%}%> ><%=year - 3%>年
</option>
<option value="<%=year-4%>" <%if(String.valueOf(year-4).equals(y)){%>selected<%}%> ><%=year - 4%>年
</option>
</select>
</div>
<div <%if (!"1".equals(isYearView)) {%>style="display: inline-block;margin-left: 6px"<%}else{%>style="display:none"<%}%>>
月份选择：
<select name="selectMonth" id="selectMonth" onchange="changMonth()">
<option value="01" <%if(1==mh){%>selected<%}%> >一月份</option>
<option value="02" <%if(2==mh){%>selected<%}%> >二月份</option>
<option value="03" <%if(3==mh){%>selected<%}%> >三月份</option>
<option value="04" <%if(4==mh){%>selected<%}%> >四月份</option>
<option value="05" <%if(5==mh){%>selected<%}%> >五月份</option>
<option value="06" <%if(6==mh){%>selected<%}%> >六月份</option>
<option value="07" <%if(7==mh){%>selected<%}%> >七月份</option>
<option value="08" <%if(8==mh){%>selected<%}%> >八月份</option>
<option value="09" <%if(9==mh){%>selected<%}%> >九月份</option>
<option value="10" <%if(10==mh){%>selected<%}%> >十月份</option>
<option value="11" <%if(11==mh){%>selected<%}%> >十一月份</option>
<option value="12" <%if(12==mh){%>selected<%}%> >十二月份</option>
</select>
</div>
<div <%if (!"1".equals(isYearView)) {%>style="display: inline-block;margin-left: 20px"<%}else{%>style="display:none"<%}%>>
<button style="margin-top: 3px" class="oaui-button bradius2px oaui-bgcolor-secondary2 oaui-color-fff oaui-button-hover1" onclick="clickYearView()">年统计视图</button>
</div>
<div <%if ("1".equals(isYearView)) {%>style="display: inline-block;margin-left: 20px"<%}else{%>style="display:none"<%}%>>
<button style="margin-top: 3px" class="oaui-button bradius2px oaui-bgcolor-secondary2 oaui-color-fff oaui-button-hover1" onclick="clickMonthView()">月统计视图</button>
</div>
<div id="main" style="width:98%;height:98%;"></div>
<script type="text/javascript">
var selectYear = '<%=y%>';
var selectMonth = '<%=m%>';
$(document).ready(function () {
var resultData = initDataSource();
initChart(resultData);
});
function initDataSource() {
var resultData = new Object();
$.ajax({
url: "${ctx}/message/countMessage.json",
type: "POST",
async: false,
dataType: "json",
data: "isYearView=<%=isYearView%>&year=" + selectYear + "&month=" + selectMonth,
success: function (result) {
if (result.resultCode == 200) {
resultData = result.resultData;
}
}
});
return resultData;
}
function initChart(resultData) {
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: <%if("1".equals(isYearView)){%>'' + selectYear + '年短信发送统计'<%}else{%>'' + selectMonth + '月短信发送统计'<%}%>, //大标题
subtext: '共发送' + resultData.totalNum + '条', //类似于副标题
x: 'center' //标题位置 居中
},
tooltip: {
},
legend: {
},
xAxis:{
data:resultData.time
},
yAxis:{
type : 'value'
},
series: [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: '发送条数',
type: 'bar',
radius: '55%',
center: ['55%', '55%'],
data: resultData.data,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}
]
};
myChart.setOption(option);
}
function changYear() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
var resultData = initDataSource();
initChart(resultData);
}
function changMonth() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
var resultData = initDataSource();
initChart(resultData);
}
function clickMonthView() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
window.location.href = "/pages/message/message_tongji.jsp?isYearView=0&year="+selectYear+"&month="+selectMonth;
}
function clickYearView() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
window.location.href = "/pages/message/message_tongji.jsp?isYearView=1&year="+selectYear+"&month="+selectMonth;
}
</script>
</body>
</html>
jsp代码解析
<%
Calendar cale = Calendar.getInstance();
int year = cale.get(Calendar.YEAR);
int mh = cale.get(Calendar.MONTH) + 1;
String isYearView = request.getParameter("isYearView");
String y = request.getParameter("year");
if(StringUtils.isEmpty(y)){
y=String.valueOf(year);
}
String m = request.getParameter("month");
if(StringUtils.isEmpty(m)){
m=String.valueOf(mh);
}
%>
这一段是Java代码，用于获取当前年份以及当前月份，首先获取请求参数中的year和month参数，如果为空的话，就分别取当前年份以及当前月份的数据
<div <%if ("1".equals(isYearView)) {%>style="display: inline-block;margin-left: 6px"<%}else{%>style="display:none"<%}%>>
年份选择：
<select name="selectYear" id="selectYear" onchange="changYear()">
<option value="<%=year%>" <%if(String.valueOf(year).equals(y)){%>selected<%}%> ><%=year%>年
</option>
<option value="<%=year-1%>" <%if(String.valueOf(year-1).equals(y)){%>selected<%}%> ><%=year - 1%>年
</option>
<option value="<%=year-2%>" <%if(String.valueOf(year-2).equals(y)){%>selected<%}%> ><%=year - 2%>年
</option>
<option value="<%=year-3%>" <%if(String.valueOf(year-3).equals(y)){%>selected<%}%> ><%=year - 3%>年
</option>
<option value="<%=year-4%>" <%if(String.valueOf(year-4).equals(y)){%>selected<%}%> ><%=year - 4%>年
</option>
</select>
</div>
<div <%if (!"1".equals(isYearView)) {%>style="display: inline-block;margin-left: 6px"<%}else{%>style="display:none"<%}%>>
月份选择：
<select name="selectMonth" id="selectMonth" onchange="changMonth()">
<option value="01" <%if(1==mh){%>selected<%}%> >一月份</option>
<option value="02" <%if(2==mh){%>selected<%}%> >二月份</option>
<option value="03" <%if(3==mh){%>selected<%}%> >三月份</option>
<option value="04" <%if(4==mh){%>selected<%}%> >四月份</option>
<option value="05" <%if(5==mh){%>selected<%}%> >五月份</option>
<option value="06" <%if(6==mh){%>selected<%}%> >六月份</option>
<option value="07" <%if(7==mh){%>selected<%}%> >七月份</option>
<option value="08" <%if(8==mh){%>selected<%}%> >八月份</option>
<option value="09" <%if(9==mh){%>selected<%}%> >九月份</option>
<option value="10" <%if(10==mh){%>selected<%}%> >十月份</option>
<option value="11" <%if(11==mh){%>selected<%}%> >十一月份</option>
<option value="12" <%if(12==mh){%>selected<%}%> >十二月份</option>
</select>
</div>
<div <%if (!"1".equals(isYearView)) {%>style="display: inline-block;margin-left: 20px"<%}else{%>style="display:none"<%}%>>
<button style="margin-top: 3px" class="oaui-button bradius2px oaui-bgcolor-secondary2 oaui-color-fff oaui-button-hover1" onclick="clickYearView()">年统计视图</button>
</div>
<div <%if ("1".equals(isYearView)) {%>style="display: inline-block;margin-left: 20px"<%}else{%>style="display:none"<%}%>>
<button style="margin-top: 3px" class="oaui-button bradius2px oaui-bgcolor-secondary2 oaui-color-fff oaui-button-hover1" onclick="clickMonthView()">月统计视图</button>
</div>
这段代码主要是两个select下拉框和两个按钮，下拉框一个用于选择年份，一个用于选择月份，按钮一个表示年视图一个表示月视图。一开始默认的是年视图，则隐藏年视图按钮以及选择月份的下拉框，点击月视图时，则隐藏月视图按钮以及选择年份的下拉框。
<div id="main" style="width:98%;height:98%;"></div>
这段代码表示的就是echarts的柱状图
下面是js代码
var selectYear = '<%=y%>';
var selectMonth = '<%=m%>';
$(document).ready(function () {
var resultData = initDataSource();
initChart(resultData);
});
设置两个全局变量，分别表示年份和月份，使用$(document).ready函数来初始化页面，initDataSource函数是动态从后台获取的数据，initChart函数是在渲染柱状图
function initDataSource() {
var resultData = new Object();
$.ajax({
url: "${ctx}/message/countMessage.json",
type: "POST",
async: false,
dataType: "json",
data: "isYearView=<%=isYearView%>&year=" + selectYear + "&month=" + selectMonth,
success: function (result) {
if (result.resultCode == 200) {
resultData = result.resultData;
}
}
});
return resultData;
}
发送ajax请求从后台获取数据
function initChart(resultData) {
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: <%if("1".equals(isYearView)){%>'' + selectYear + '年短信发送统计'<%}else{%>'' + selectMonth + '月短信发送统计'<%}%>, //大标题
subtext: '共发送' + resultData.totalNum + '条', //类似于副标题
x: 'center' //标题位置 居中
},
tooltip: {
},
legend: {
},
xAxis:{
data:resultData.time
},
yAxis:{
type : 'value'
},
series: [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: '发送条数',
type: 'bar',
radius: '55%',
center: ['55%', '55%'],
data: resultData.data,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}
]
};
myChart.setOption(option);
}
这段代码是在渲染柱状图
function changYear() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
var resultData = initDataSource();
initChart(resultData);
}
function changMonth() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
var resultData = initDataSource();
initChart(resultData);
}
这两个函数分别表示选择年份以及月份的下拉框值改变了就重新发ajax请求并重新渲染柱状图
function clickMonthView() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
window.location.href = "/pages/message/message_tongji.jsp?isYearView=0&year="+selectYear+"&month="+selectMonth;
}
function clickYearView() {
selectYear = $('#selectYear option:selected').val();
selectMonth = $('#selectMonth option:selected').val();
window.location.href = "/pages/message/message_tongji.jsp?isYearView=1&year="+selectYear+"&month="+selectMonth;
}
这两个函数表示点击年视图按钮以及月视图按钮时进行跳转
Java代码
@RequestMapping(value = "/countMessage")
@ResponseBody
public JsonResult countMessage(String isYearView,String year,String month) throws Exception {
Calendar cale = Calendar.getInstance();
if(StringUtils.isEmpty(year)){
year = String.valueOf(cale.get(Calendar.YEAR));
}
if(StringUtils.isEmpty(month)){
month = String.valueOf(cale.get(Calendar.MONTH)+1);
}
String sql="";
String flag="月";
if("1".equals(isYearView)){
sql="SELECT TO_CHAR(ds.SENDTIME,'YYYY-MM') as time,count(*) as num " +
" FROM SMS_LOG ds " +
" where TO_CHAR(ds.SENDTIME,'YYYY')='"+year+"'" +
" GROUP BY TO_CHAR(ds.SENDTIME,'YYYY-MM')" +
" ORDER BY TO_CHAR(ds.SENDTIME,'YYYY-MM')";
}else{
sql="SELECT TO_CHAR(ds.SENDTIME,'YYYY-MM-DD') as time,count(*) as num " +
" FROM SMS_LOG ds " +
" where TO_CHAR(ds.SENDTIME,'YYYY-MM')='"+year+"-"+month+"'" +
" GROUP BY TO_CHAR(ds.SENDTIME,'YYYY-MM-DD')" +
" ORDER BY TO_CHAR(ds.SENDTIME,'YYYY-MM-DD')";
flag="号";
}
List<Map> ls = SmsLog.me.sqlFind(sql);
List<String> months = new ArrayList<>();
List<BigDecimal> newLs = new ArrayList<>();
BigDecimal totalNum = new BigDecimal(0);
for (Map map:ls) {
String time = (String) map.get("time");
BigDecimal num = (BigDecimal) map.get("num");
time = time.substring(time.length()-2)+flag;
totalNum= totalNum.add(num);
months.add(time);
newLs.add(num);
}
Map<String,Object> result = new HashMap<>();
result.put("time",months);
result.put("data",newLs);
result.put("totalNum",totalNum.toString());
//返回操作结果给前台
JsonResult jr = new JsonResult(200, "", result);
return jr;
}