Echarts使用
之前寫過一篇關(guān)于HighCharts的博文，此次新系統(tǒng)也需要做統(tǒng)計(jì)圖表了，HighCharts需要授權(quán)的，所以此次也不用這個(gè)版本了。百度的Echarts也很不錯(cuò)，大概看了一下，和HighCharts的風(fēng)格沒什么差別。從昨天開始研究了一下，也查了一些資料，這里集成java語言，做了一個(gè)demo。我這里做的是tag標(biāo)簽的寫法，為了更加通用，這里也分享給大家了。
所需要的包，可以直接下載，東西挺多的，按需引入。
開始上代碼。
首先是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和seriesoption.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("加載數(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: AdministratorDate: 2014/11/24Time: 12:02To 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 List<String> legend = new ArrayList<String>();//數(shù)據(jù)分組public List<String> axis = new ArrayList<String>();//橫坐標(biāo)public List<Series> series = new ArrayList<Series>();//縱坐標(biāo)public Echarts(List<String> legendList, List<String> categoryList, List<Series> 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 List<Integer> data;public Series(String name, String type, List<Integer> 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 {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);}}這個(gè)里面，用jackson將對(duì)象轉(zhuǎn)為json格式字符串，輸出到頁面即可。
自此，圖表就可以順利生成了。
上面業(yè)務(wù)里面，還可以做的更通用一些。作為示例，這里先寫到這里。
?http://www.cnblogs.com/juepei/p/4120619.html
總結(jié)
- 上一篇： vs2015 编译时错误列表中没有错误，
- 下一篇： Got a packet bigger