html+js+servlet實現echarts圖表展示

一坠陈、需求：

  • 提供登錄頁面，登錄成功后跳轉到echarts展示頁面碧注，登錄失敗回到登錄頁面
  • 使用攔截器過濾請求嘶窄，必須登錄后才能夠訪問echarts展示頁面
  • echarts頁面讀取后臺傳遞過來的json數據，在前臺正確顯示
  • 設置session過期時間為5分鐘
  • 登錄帳號和密碼為：admin/123456（項目代碼路徑在最后）

二脊僚、簡易架構圖

架構.png

三相叁、代碼結構

代碼結構.png

四、代碼

1. 后臺代碼

1.1 CheckAccountServlet.java

package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.beans.AccountBean;


public class CheckAccountServlet extends HttpServlet {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        HttpSession session = req.getSession();
        AccountBean account = new AccountBean();
        String username = req.getParameter("username");
        String pwd = req.getParameter("password");
        account.setPassword(pwd);
        account.setUsername(username);
        if ((username != null) && (username.trim().equals("admin"))) {
            if ((pwd != null) && (pwd.trim().equals("123456"))) {
                System.out.println("success");
                session.setAttribute("account", account);
                String login_suc = "print.html";
                resp.sendRedirect(login_suc);
                return;
            }
        }
        String login_fail = "index.html";
        System.out.println("failed");
        resp.sendRedirect(login_fail);
        return ;
    }

}

1.2 EchartsServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONException;
import org.json.JSONObject;

/**
 * 
 * @author Administrator
 *
 */
//@WebServlet("/EchartsServlet")
public class EchartsServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @SuppressWarnings("unused")
    @Override
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        //設置response響應頭格式
        //解決中文亂碼問題
        response.setContentType("application/json-rpc;charset=utf-8");
        // response.setHeader("Cache-Control", "no-cache");
        // response.setHeader("Expires", "0");
        // response.setHeader("Pragma", "No-cache");
        // response.setHeader("Access-Control-Allow-Origin", "*");
        // response.setHeader("Access-Control-Allow-Credentials","true");
        // response.setHeader("Access-Control-Allow-Headers",
        // "*, X-Requested-With, Content-Type");
        response.setHeader("Access-Control-Allow-Methods",
                "GET, OPTIONS, POST, DELETE, PUT");
        response.setHeader("Content-Type: text/html", "charset=UTF-8");
    
        String[] categories = { "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" };
        Integer[] values = { 5, 20, 36, 10, 10, 20 };
        String[] categories2 = { "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" };
        Integer[] values2 = { 30, 60, 32, 30, 10,50 };
            
        //使用json將數據進行封裝
         JSONObject json = new JSONObject();
         try {
         json.put("categories", categories);
         json.put("values", values);
         json.put("categories2", categories2);
         json.put("values2", values2);
         } catch (JSONException e) {
         e.printStackTrace();
         }

        if (json != null) {
            PrintWriter writer = response.getWriter();
            writer.write(json.toString());
            writer.flush();
            writer.close();
        } else {
            response.getWriter().print(1);
        }

    }

}

1.3 AccountBean.java

package com.beans;

public class AccountBean {
    private String username;
    private String password;

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}

1.4 LoginFilter.java

package com.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.beans.AccountBean;

/**
 * 登錄頁面攔截器
 * @author Administrator
 *
 */
public class LoginFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {

        // 在過濾器中檢查是否已經登錄

        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;

        AccountBean account = (AccountBean) req.getSession().getAttribute("account");
        
        //如果請求AccountBean為空即未登錄或并且請求url不是以index.html結尾并且不是以CheckAccount
        //（注：servlet）結尾,將請求跳轉到index.html頁面
        //即未登錄如果訪問其他頁面則自動跳轉到登錄頁面辽幌，必須登錄后才能進行訪問
        if (account == null && !req.getRequestURI().endsWith("index.html")
                && !req.getRequestURI().endsWith("CheckAccount")) {
            resp.sendRedirect("index.html"); 
        
//          req.getRequestDispatcher("index.html").forward(request, response);
        } else {
            chain.doFilter(request, response);
        }

    }

    @Override
    public void destroy() {

    }

}

1.5 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1">

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

    <servlet>
        <description>This is the description of my J2EE component</description>
        <display-name>This is the display name of my J2EE component</display-name>
        <servlet-name>CheckAccountServlet</servlet-name>
        <servlet-class>com.servlet.CheckAccountServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CheckAccountServlet</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>EchartsServlet</servlet-name>
        <servlet-class> com.servlet.EchartsServlet</servlet-class>
    </servlet>


    <servlet-mapping>
        <servlet-name>EchartsServlet</servlet-name>
        <url-pattern>/EchartsServlet</url-pattern>
    </servlet-mapping>

    <!-- 攔截器 -->
    <filter>
        <filter-name>loginFilter</filter-name>
        <filter-class>com.filter.LoginFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>loginFilter</filter-name>
        <url-pattern>/print.html</url-pattern>
    </filter-mapping>
    
    <!-- session過期時間 (分鐘) -->
    <session-config>
      <session-timeout>5</session-timeout>
</session-config>
</web-app>

1.6 第三方jar包

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5903023-8813b14da0698145.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

jar包都在最后的項目代碼當中增淹，在WEB-INF下的lib包下，引用類的情況大致如下：
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONException;

import org.json.JSONObject;

2. 前臺代碼

注：前臺登錄頁面采用的是網上下載的模版乌企，鏈接為http://www.cssmoban.com/cssthemes/4908.shtml

2.1 index.html

<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>FJJF screen Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel='stylesheet' >
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div class="page-container">
            <h1>Login</h1>
            <form action="login" method="post">
                <input type="text" name="username" class="username" placeholder="Username">
                <input type="password" name="password" class="password" placeholder="password">
                <button type="submit">Sign me in</button>
                <div class="error"><span>+</span></div>
            </form>
            <div class="connect">
                <p>Or connect with:</p>
                <p>
                    <a class="facebook" ></a>
                    <a class="twitter" ></a>
                </p>
            </div>
        </div>
     

        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js"></script>
        <script src="assets/js/supersized.3.2.7.min.js"></script>
        <script src="assets/js/supersized-init.js"></script>
        <script src="assets/js/scripts.js"></script>

    </body>
</html>

2.2 print.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./js/echarts.common.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.7.1.js"></script>
    <!--設置div不換行-->
    <style type="text/css">
        div{
            float:left;
        }
    </style>
</head>

<body style="background-image: url("./assets/img/backgrounds/2.jpg"); background-repeat:no-repeat;">
    <!-- 為ECharts準備一個具備大新侨蟆（寬高）的Dom -->
    <div id="main" style="width: 600px;height:420px;color: #411F2D;border: 1px solid gray;"></div>
    <script type="text/javascript" src="./js/echartsFigure/barTest.js"> </script>

    <div id="chart"
        style="width: 600px; height: 420px; margin: 0 auto; border: 1px solid gray;"></div>
        <script type="text/javascript" src="./js/echartsFigure/barTest2.js"> </script>
</body>
</html>

2.3 barTest.js

// 基于準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
        
        var categories = [];
        var values = [];
        
        // 同步執(zhí)行
        $.ajaxSettings.async = false;
        
        // 加載數據
    
        $.getJSON('EchartsServlet', function (json) {
            categories = json.categories;
            values = json.values;
        });
        
        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: categories
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: values
            }]
        };

        // 使用剛指定的配置項和數據顯示圖表加酵。
        myChart.setOption(option);

2.4 barTest2.js

// 基于準備好的dom拳喻，初始化echarts實例
var myChart = echarts.init(document.getElementById('chart'));

var categories = [];
var values = [];

// 同步執(zhí)行
$.ajaxSettings.async = false;

// 加載數據

$.getJSON('EchartsServlet', function (json) {
    categories = json.categories2;
    values = json.values2;
});



// 指定圖表的配置項和數據
var option = {
    title : {
        text: '銷量分析',
    },
    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',
            data : categories
        }
    ],
    yAxis : [
        {
            type : 'value',
             axisLabel : {
                formatter: '{value} 元'
            }
        }
    ],
    series : [
        {
            name:'銷量',
            type:'bar',
            itemStyle:{
                 
                normal:{
                    
                    color:'#2EC7C9',
                     barBorderRadius: 10,
                 
                }
            },
            data:values,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ],
                itemStyle:{
                normal:{
                    
                    label:{
                        show:true,
                       textStyle:{
                        color:'#090909'
                       }
                    }   
                }
        },
            }
           
        }
        
    ]
};
                    
                                 
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

效果圖

login.png
echarts.png
整個項目代碼鏈接：http://pan.baidu.com/s/1hsbyF44 密碼: fg3j

由于對web開發(fā)不太熟猪腕，剛開始只能用最基本的東西來展現了冗澈，后面考慮用spring+springMVC+MyBatis來完善后臺，前臺用echarts做圖表展示陋葡，后臺數據處理考慮用hadoop+spark+es或hbase做數據計算亚亲、存儲和索引處理，樓主菜鳥一枚腐缤，各位看客老爺們見諒捌归，勿噴！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末岭粤，一起剝皮案震驚了整個濱河市惜索，隨后出現的幾起案子，更是在濱河造成了極大的恐慌绍在，老刑警劉巖门扇，帶你破解...
    沈念sama閱讀 212,599評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件彤蔽，死亡現場離奇詭異嬉探，居然都是意外死亡，警方通過查閱死者的電腦和手機帮毁，發(fā)現死者居然都...
    沈念sama閱讀 90,629評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門溜宽，熙熙樓的掌柜王于貴愁眉苦臉地迎上來吉拳，“玉大人，你說我怎么就攤上這事适揉×粼埽” “怎么了？”我有些...
    開封第一講書人閱讀 158,084評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵嫉嘀，是天一觀的道長炼邀。 經常有香客問我，道長剪侮，這世上最難降的妖魔是什么拭宁？ 我笑而不...
    開封第一講書人閱讀 56,708評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮瓣俯，結果婚禮上杰标，老公的妹妹穿的比我還像新娘。我一直安慰自己彩匕，他們只是感情好腔剂，可當我...
    茶點故事閱讀 65,813評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著驼仪，像睡著了一般掸犬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绪爸，一...
    開封第一講書人閱讀 50,021評論 1贊 291
  • 城市分裂傳說
    那天登渣，我揣著相機與錄音，去河邊找鬼毡泻。 笑死胜茧，一個胖子當著我的面吹牛，可吹牛的內容都是我干的仇味。 我是一名探鬼主播呻顽，決...
    沈念sama閱讀 39,120評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼丹墨！你這毒婦竟也來了廊遍？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 37,866評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤贩挣，失蹤者是張志新（化名）和其女友劉穎喉前，沒想到半個月后没酣，有當地人在樹林里發(fā)現了一具尸體，經...
    沈念sama閱讀 44,308評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡卵迂，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,633評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年裕便，在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片见咒。...
    茶點故事閱讀 38,768評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡偿衰，死狀恐怖，靈堂內的尸體忽然破棺而出改览，到底是詐尸還是另有隱情下翎，我是刑警寧澤，帶...
    沈念sama閱讀 34,461評論 4贊 333
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布宝当，位于F島的核電站视事，受9級特大地震影響，放射性物質發(fā)生泄漏庆揩。R本人自食惡果不足惜郑口，卻給世界環(huán)境...
    茶點故事閱讀 40,094評論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望盾鳞。 院中可真熱鬧犬性，春花似錦、人聲如沸腾仅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽推励。三九已至鹤耍，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間验辞，已是汗流浹背稿黄。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跌造，地道東北人杆怕。 一個月前我還...
    沈念sama閱讀 46,571評論 2贊 362
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像壳贪，于是被迫代替她去往敵國和親陵珍。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 43,666評論 2贊 350

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理违施，服務發(fā)現互纯，斷路器，智...
    卡卡羅2017閱讀 134,637評論 18贊 139
  • 1. Java基礎部分 基礎部分的順序：基本語法磕蒲，類相關的語法留潦，內部類的語法只盹，繼承相關的語法，異常的語法兔院，線程的語...
    子非魚_t_閱讀 31,602評論 18贊 399
  • “這是你第幾次相親了?” "你買的配套多少錢殖卑？" “多少次有繼續(xù)的？” “你薪金多少?” “秆乳。。钻哩∫傺撸” 一坐下來的一...
    V之日志閱讀 192評論 6贊 9
  • 我們知道 ArrayList 中有一個批量刪除的集合的方法：removeAll(Collection<?> c)，...
    往事都隨風吧閱讀 1,682評論 1贊 0
  • 被認為很傻很天真的人 往往堅信別人對自己好就是真的對自己好街氢，對自己笑就是真的對自己笑扯键。 人生一旦開竅了，反而就沒那...
    壞心眼的淑女閱讀 212評論 0贊 0