echarts用來(lái)做數(shù)據(jù)報(bào)表的一個(gè)展示效果了，這里我們來(lái)給各位介紹一個(gè)java/jsp利用echarts實(shí)現(xiàn)報(bào)表統(tǒng)計(jì)的例子，例子非常的簡(jiǎn)單只是把數(shù)據(jù)調(diào)出來(lái)給echarts即可了。
開(kāi)始上代碼。
首先是tag，這個(gè)東西，大學(xué)之后，幾乎不怎么用了，沒(méi)想到現(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;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>寫(xiě)tag需要引入jstl包，谷歌下就有了。1.2之前需要兩個(gè)包，一個(gè)jstl，一個(gè)standard。1.2之后貌似合并為一個(gè)了。<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>這句的寫(xiě)法也有點(diǎn)不同。為防萬(wàn)一，我是引入的兩個(gè)包。
使用ajax請(qǐng)求，需要引入jquery的包，引入echarts的時(shí)候，同時(shí)引入這個(gè)。
在上面代碼中，最主要的還是標(biāo)紅的那段，series是一個(gè)數(shù)組，后臺(tái)加入多組數(shù)據(jù)的時(shí)候，這里需要遍歷取出。
jsp頁(yè)面引入該標(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" * 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); }}效果圖如下：
新聞熱點(diǎn)
疑難解答
圖片精選
