基於Servlet的Echarts例子（2018-12-26更新)

時間 2019-12-04

原文原文鏈接

引子

ECharts是百度出品的，一個使用 JavaScript 實現的開源可視化庫。程序員在Web頁面上引入並稍做配置就能作出漂亮的數據圖表。javascript

本篇文章簡單介紹一下如何在JSP中使用Echarts，例子圖以下：
html

上手

圖表顯示是須要數據的，可是Echarts官網教程中爲了演示方便直接在頁面js中填入數據，如Demo-將來一週氣溫變化所示。「周1、週二..」等數據都直接在頁面寫好：前端

xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['週一','週二','週三','週四','週五','週六','週日']
        }
    ]

一般展現數據的頁面須要動態的從遠程服務器將數據取出放入圖表。熟悉ajax的人，天然能夠將上面的代碼稍做修改實現動態取數據，這裏嘗試使用JSP來從服務器端獲取數據。java

HTML頁面端參考代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.common.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<title>Echarts4示例</title>
</head>
<body>
<div>Echarts4示例</div>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
        var url = 'GetAllDataServlet';//得到銷量、營業額、x軸的數據
        $.getJSON(url).done(function(json) {//向url請求數據，若是成功，將數據放到json
            // 2.從json中得到數據
            salesVolume = json.salesVolume;//銷量
            bussinessVolume = json.bussinessVolume;//營業額
            months = json.months;//月份

            // 3.配置option
            var option = {
                title : {
                    text : 'ECharts 入門示例'
                },
                tooltip : {},
                legend : {
                    data : [ '銷量' ],
                    data : [ '營業額' ]
                },
                xAxis : {
                    data : months
                },
                yAxis : {},
                series : [ {
                    name : '銷量',
                    type : 'bar',
                    data : salesVolume
                }, {
                    name : '營業額',
                    type : 'line',
                    data : bussinessVolume
                } ],
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : true
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ 'line', 'bar' ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                }
            }
            myChart.setOption(option);
        })
    </script>
</body>
</html>

這裏的$.getJSON(url).done(function(json) ..使用了jQuery的ajax API，訪問url指向的servlet，從servlet返回的數據放到json變量中。jquery

服務器端參考代碼

@WebServlet("/GetAllDataServlet")
public class GetAllDataServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public GetAllDataServlet() {
            super();
        }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*銷量*/
        Integer[] salesVolume = {10,100,20,56,35,80};
        /*營業額*/
        double[] bussinessVolume = {10*10,100*8.5,20*9.5,56*9,35*9.5,80*9};
        /*橫軸, 月份數據*/
        String[] months = {"1","2","3","4","5","6"};
        
        Map<String, Object> map = new HashMap<>();
        map.put("salesVolume", salesVolume);
        map.put("bussinessVolume",bussinessVolume);
        map.put("months", months);
        
        response.getWriter().println(JSON.toJSONString(map));
        
    }

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

}

這裏使用了阿里開發的FastJson庫將map中的值轉換成Echarts可識別的json字符串，格式形如：ios

{"bussinessVolume":[100.0,850.0,190.0,504.0,332.5,720.0],"months":["1","2","3","4","5","6"],"salesVolume":[10,100,20,56,35,80]}

其餘：
實際上你也能夠不用json工具，徹底手寫獲得上述格式化字符串。git

項目代碼閱讀指南：程序員

GetAllDataServlet.java，echart4.html是前端訪問Servlet得到echarts所需數據的一個示例。
index.jsp裏面包含了有用的參考連接。重點掌握其中使用jQuery實現ajax帶參數請求，詳見裏面jQuery $.post() 方法。

參考資料：

項目相關Git地址，若是不會使用Git，建議克隆下來，而後將相關代碼複製粘貼到新建的Dynamic Web Project相應目錄中。
本項目的EclipseJEE的參考代碼-代碼較老。
Echarts Example，裏面包含了不少圖表示例是文檔。
JQuery Ajax, Axios, Fetch區別之我見，該文主要講解發起Ajax的請求的幾種經常使用方法，如今經常使用Axios，2018-12更新。ajax

1. 更新例子
2. ECharts上手例子
3. liunx 小例子更新中...
4. 基於python的appium例子
5. JAVAWEB servlet的小例子
6. 20181226——java抽象
7. SpringMVC淺析 - 20181226
8. ECharts簡單運行例子
9. tomcat6安裝+servlet例子
10. solr的原子更新/局部更新
更多相關文章...
• ADO 更新記錄 - ADO 教程
• PHP imagecreate - 新建一個基於調色板的圖像 - PHP參考手冊
• ☆基於Java Instrument的Agent實現
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。