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

 更新時間:2015-11-18 15:51:00   作者:佚名   我要評論(0)

echarts用來做數據報表的一個展示效果了,這里我們來給各位介紹一個java/jsp利用echarts實現報表統計的例子,例子非常的簡單只是把數據調出來給echarts即可了。開始上代碼。

echarts用來做數據報表的一個展示效果了,這里我們來給各位介紹一個java/jsp利用echarts實現報表統計的例子,例子非常的簡單只是把數據調出來給echarts即可了。

開始上代碼。

首先是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格式字符串,輸出到頁面即可。

自此,圖表就可以順利生成了。


相關文章

  • 深入理解nodejs搭建靜態服務器(實現命令行)

    深入理解nodejs搭建靜態服務器(實現命令行)

    靜態服務器 使用node搭建一個可在任何目錄下通過命令啟動的一個簡單http靜態服務器 完整代碼鏈接 安裝:npm install yg-server -g 啟動:yg-server
    2019-02-06
  • 詳解webpack編譯速度提升之DllPlugin

    詳解webpack編譯速度提升之DllPlugin

    一、前言 The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlu
    2019-02-06
  • Vue從TodoList中學父子組件通信

    Vue從TodoList中學父子組件通信

    簡單的 TodoList 實現一個簡單的 todolist,當我輸入內容后,點擊提交自動添加在下面,如下圖所示: 用代碼實現這個效果: <div id="app"> <input ty
    2019-02-06
  • Tensorflow分類器項目自定義數據讀入的實現

    Tensorflow分類器項目自定義數據讀入的實現

    在照著Tensorflow官網的demo敲了一遍分類器項目的代碼后,運行倒是成功了,結果也不錯。但是最終還是要訓練自己的數據,所以嘗試準備加載自定義的數據,然而d
    2019-02-06
  • ES6 對象的新功能與解構賦值介紹

    ES6 對象的新功能與解構賦值介紹

    ES6 通過字面量語法擴展、新增方法、改進原型等多種方式加強對象的使用,并通過解構簡化對象的數據提取過程。 一、字面量語法擴展 在 ES6 模式下使用字
    2019-02-06
  • Redis連接錯誤的情況總結分析

    Redis連接錯誤的情況總結分析

    前言 最近由于流量增大,redis 出現了一連串錯誤,比如: LOADING Redis is loading the dataset in memory use of closed network connection connec
    2019-02-06
  • 使用TensorFlow實現二分類的方法示例

    使用TensorFlow實現二分類的方法示例

    使用TensorFlow構建一個神經網絡來實現二分類,主要包括輸入數據格式、隱藏層數的定義、損失函數的選擇、優化函數的選擇、輸出層。下面通過numpy來隨機生成一
    2019-02-06
  • PHP實現字符串大小寫轉函數的功能實例

    PHP實現字符串大小寫轉函數的功能實例

    字符串的大小寫轉換功能在日常中經常使用。那么如何實現一個簡單的大小寫轉換功能呢&#63; 在php中,最終使用的是c語言的toupper,tolower函數將字符進行大小寫
    2019-02-06
  • Nginx代理時header頭中帶"_"信息丟失問題的解決

    Nginx代理時header頭中帶"_"信息丟失問題的解決

    前言 開發網關項目時,在請求時往請求頭header中放入了簽名sign_key信息,在接收請求時再從header中拿出,在本地調試時是可以的,但上線之后通過Nginx代理之后
    2019-02-06
  • Python實現E-Mail收集插件實例教程

    Python實現E-Mail收集插件實例教程

    __import__函數 我們都知道import是導入模塊的,但是其實import實際上是使用builtin函數import來工作的。在一些程序中,我們可以動態去調用函數,如果我們
    2019-02-06

最新評論

黑龙江新11选5开奖结果