echarts用來做數(shù)據(jù)報(bào)表的一個(gè)展示效果了，這里我們來給各位介紹一個(gè)java/jsp利用echarts實(shí)現(xiàn)報(bào)表統(tǒng)計(jì)的例子，例子非常的簡(jiǎn)單只是把數(shù)據(jù)調(diào)出來給echarts即可了。
開始上代碼。
首先是tag，這個(gè)東西，大學(xué)之后，幾乎不怎么用了，沒想到現(xiàn)在又用到了。
%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%>
%--自定義div容器id--%>
%@attribute name="container" required="true" %>
%--自定義標(biāo)題--%>
%@attribute name="title" required="true" %>
%--自定義子標(biāo)題--%>
%@attribute name="subtitle" required="false" %>
%--自定義數(shù)據(jù)請(qǐng)求url--%>
%@attribute name="urls" required="true" %>
%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
script src="/echarts-2.1.8/build/dist/jquery.min.js">/script>
script src="/echarts-2.1.8/build/dist/echarts-all.js">/script>
script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts圖表
var myChart = echarts.init(document.getElementById('${container}'));
var option={
title : {
text: '${title}',
subtext: '${subtitle}'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} '
}
}
],
series : []
};
//采用ajax異步請(qǐng)求數(shù)據(jù)
$.ajax({
type:'post',
url:'${urls}',
dataType:'json',
success:function(result){
if(result){
//將返回的category和series對(duì)象賦值給options對(duì)象內(nèi)的category和series
option.xAxis[0].data = result.axis;
option.legend.data = result.legend;
var series_arr=result.series;
for(var i=0;iseries_arr.length;i++){
option.series[i] = result.series[i];
}
myChart.hideLoading();
myChart.setOption(option);
}
},
error:function(errMsg){
console.error("加載數(shù)據(jù)失敗")
}
});
// 為echarts對(duì)象加載數(shù)據(jù)
// myChart.setOption(option);
/script>
寫tag需要引入jstl包，谷歌下就有了。1.2之前需要兩個(gè)包，一個(gè)jstl，一個(gè)standard。1.2之后貌似合并為一個(gè)了。%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>這句的寫法也有點(diǎn)不同。為防萬一，我是引入的兩個(gè)包。
使用ajax請(qǐng)求，需要引入jquery的包，引入echarts的時(shí)候，同時(shí)引入這個(gè)。
在上面代碼中，最主要的還是標(biāo)紅的那段，series是一個(gè)數(shù)組，后臺(tái)加入多組數(shù)據(jù)的時(shí)候，這里需要遍歷取出。
jsp頁面引入該標(biāo)簽：
%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2014/11/24
Time: 12:02
To change this template use File | Settings | File Templates.
--%>
%@ page contentType="text/html;charset=UTF-8" language="java" %>
%@taglib prefix="c" tagdir="/WEB-INF/tags" %>
html>
head>
title>/title>
/head>
body>
div id="main" style="height: 400px">/div>
c:linecharts container="main" title="測(cè)試標(biāo)簽" subtitle="測(cè)試子標(biāo)簽" urls="/tags">/c:linecharts>
/body>
/html>
前端的部分到此算是完成，然后就是后臺(tái)部分了。
后臺(tái)用兩個(gè)java對(duì)象，封裝一下要傳遞的數(shù)據(jù)
package bean.newseries;
import java.util.ArrayList;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Echarts {
public ListString> legend = new ArrayListString>();//數(shù)據(jù)分組
public ListString> axis = new ArrayListString>();//橫坐標(biāo)
public ListSeries> series = new ArrayListSeries>();//縱坐標(biāo)
public Echarts(ListString> legendList, ListString> categoryList, ListSeries> seriesList) {
super();
this.legend = legendList;
this.axis = categoryList;
this.series = seriesList;
}
}
這里放series的具體數(shù)據(jù)：
package bean.newseries;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Series {
public String name;
public String type;
public ListInteger> data;
public Series(String name, String type, ListInteger> data) {
this.name = name;
this.type = type;
this.data = data;
}
}
后臺(tái)業(yè)務(wù)中，將自己的數(shù)據(jù)，放到對(duì)象中，然后轉(zhuǎn)換成json格式：
package tagservlet;
import bean.newseries.Echarts;
import bean.newseries.Series;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* Created by on 2014/11/24.
*/
public class NewTagServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ListString> legend=new ArrayListString>(Arrays.asList(new String[]{"最高值","最低值"}));
ListString> axis=new ArrayListString>(Arrays.asList(new String[]{"周一","周二","周三","周四","周五","周六","周日"}));
ListSeries> series=new ArrayListSeries>();
series.add(new Series("最高值","line",new ArrayListInteger>(Arrays.asList(21,23,28,26,21,33,44))));
series.add(new Series("最低值","line",new ArrayListInteger>(Arrays.asList(-2,-12,10,0,20,11,-6))));
Echarts echarts=new Echarts(legend,axis,series);
ObjectMapper objectMapper=new ObjectMapper();
System.out.println(objectMapper.writeValueAsString(echarts));
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(objectMapper.writeValueAsString(echarts));
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
效果圖如下：
您可能感興趣的文章:- JavaScript之ECharts用法講解
- JS使用canvas技術(shù)模仿echarts柱狀圖
- JavaScript使用百度ECharts插件繪制餅圖操作示例
- 利用ECharts.js畫K線圖的方法示例
- JavaScript數(shù)據(jù)可視化:ECharts制作地圖
