之前寫過一篇關于HighCharts的博文，此次新系統也需要做統計圖表了，HighCharts需要授權的，是以此次也不用這個版本了。百度的Echarts也很不錯，大概看了一下，和HighCharts的風格沒什麼差别。從昨天開始研究了一下，也查了一些資料，這裡內建java語言，做了一個demo。我這裡做的是tag标簽的寫法，為了更加通用，這裡也分享給大家了。
所需要的包，可以直接下載下傳，東西挺多的，按需引入。
開始上代碼。
首先是tag，這個東西，大學之後，幾乎不怎麼用了，沒想到現在又用到了。
<%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%>
<%--自定義div容器id--%>
<%@attribute name="container" required="true" %>
<%--自定義标題--%>
<%@attribute name="title" required="true" %>
<%--自定義子标題--%>
<%@attribute name="subtitle" required="false" %>
<%--自定義資料請求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">
// 基于準備好的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異步請求資料
$.ajax({
type:'post',
url:'${urls}',
dataType:'json',
success:function(result){
if(result){
//将傳回的category和series對象指派給options對象内的category和series
option.xAxis[0].data = result.axis;
option.legend.data = result.legend;
var series_arr=result.series;
for(var i=0;i<series_arr.length;i++){
option.series[i] = result.series[i];
}
myChart.hideLoading();
myChart.setOption(option);
}
},
error:function(errMsg){
console.error("加載資料失敗")
}
});
// 為echarts對象加載資料
// myChart.setOption(option);
</script> 寫tag需要引入jstl包，谷歌下就有了。1.2之前需要兩個包，一個jstl，一個standard。1.2之後貌似合并為一個了。<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>這句的寫法也有點不同。為防萬一，我是引入的兩個包。
使用ajax請求，需要引入jquery的包，引入echarts的時候，同時引入這個。
在上面代碼中，最主要的還是标紅的那段，series是一個數組，背景加入多組資料的時候，這裡需要周遊取出。
jsp頁面引入該标簽：
<%--
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="測試标簽" subtitle="測試子标簽" urls="/tags"></c:linecharts>
</body>
</html> 前端的部分到此算是完成，然後就是背景部分了。
背景用兩個java對象，封裝一下要傳遞的資料：
package bean.newseries;
import java.util.ArrayList;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Echarts {
public List<String> legend = new ArrayList<String>();//資料分組
public List<String> axis = new ArrayList<String>();//橫坐标
public List<Series> series = new ArrayList<Series>();//縱坐标
public Echarts(List<String> legendList, List<String> categoryList, List<Series> seriesList) {
super();
this.legend = legendList;
this.axis = categoryList;
this.series = seriesList;
}
} 這裡放series的具體資料：
package bean.newseries;
import java.util.List;
/**
* Created by on 2014/11/25.
*/
public class Series {
public String name;
public String type;
public List<Integer> data;
public Series(String name, String type, List<Integer> data) {
this.name = name;
this.type = type;
this.data = data;
}
} 背景業務中，将自己的資料，放到對象中，然後轉換成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 {
List<String> legend=new ArrayList<String>(Arrays.asList(new String[]{"最高值","最低值"}));
List<String> axis=new ArrayList<String>(Arrays.asList(new String[]{"周一","周二","周三","周四","周五","周六","周日"}));
List<Series> series=new ArrayList<Series>();
series.add(new Series("最高值","line",new ArrayList<Integer>(Arrays.asList(21,23,28,26,21,33,44))));
series.add(new Series("最低值","line",new ArrayList<Integer>(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);
}
} 這個裡面，用jackson将對象轉為json格式字元串，輸出到頁面即可。
自此，圖表就可以順利生成了。
上面業務裡面，還可以做的更通用一些。作為示例，這裡先寫到這裡。
除非注明轉載，其他文章均為作者原創，可以自由轉載，但請注明轉載的本文的位址，請尊重作者的勞動成果。
![Vue使用echarts-wordcloud生成詞雲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)