java/jsp利用echarts實現報表統計的例子

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

開始上代碼。

首先是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包，Google下就有了。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格式字串，輸出到頁面即可。

自此，圖表就可以順利產生了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More