歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Echarts通過Ajax實現動態數據加載

Echarts(3.x版)官網實例的數據都是靜態的,實際使用中往往會要求從服務器端取數據進行動態顯示,官網教程裡給出的異步數據加載很粗略,下面就以官網最簡單的實例為例子,詳細演示如下過程:1.客戶端通過ajax發送請求;2.服務器端Servlet接收請求;3.生成json數據並返回給客戶端;4.客戶端接收數據後顯示。

1.客戶端通過ajax發送請求

先繪制一個最簡單的Echarts圖表:

(這裡就直接貼上代碼了,直接用的是官網教程裡異步數據加載和更新裡的代碼)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>
    
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>

<body>
    <!-- 為ECharts准備一個具備大小(寬高)的Dom -->
    <div id="main" ></div>
    
    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('main'));
         // 顯示標題,圖例和空的坐標軸
         myChart.setOption({
             title: {
                 text: '異步數據加載示例'
             },
             tooltip: {},
             legend: {
                 data:['銷量']
             },
             xAxis: {
                 data: []
             },
             yAxis: {},
             series: [{
                 name: '銷量',
                 type: 'bar',
                 data: []
             }]
         });


  </script> </body> </html>

看到了吧,現在option中的xAxis和yAxis裡的data都是空值。待會兒我們會用從服務器取回的數據去”填滿“它。

下面貼上補充了ajax部分的完整前端代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts</title>
    
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>

<body>
    <!-- 為ECharts准備一個具備大小(寬高)的Dom -->
    <div id="main" ></div>
    
    <script type="text/javascript">
        
        var myChart = echarts.init(document.getElementById('main'));
         // 顯示標題,圖例和空的坐標軸
         myChart.setOption({
             title: {
                 text: '異步數據加載示例'
             },
             tooltip: {},
             legend: {
                 data:['銷量']
             },
             xAxis: {
                 data: []
             },
             yAxis: {},
             series: [{
                 name: '銷量',
                 type: 'bar',
                 data: []
             }]
         });
         
         myChart.showLoading();    //數據加載完之前先顯示一段簡單的loading動畫
         
         var names=[];    //類別數組(實際用來盛放X軸坐標值)
         var nums=[];    //銷量數組(實際用來盛放Y坐標值)
         
         $.ajax({
         type : "post",
         async : true,            //異步請求(同步請求將會鎖住浏覽器,用戶其他操作必須等待請求完成才可以執行)
         url : "TestServlet",    //請求發送到TestServlet處
         data : {},
         dataType : "json",        //返回數據形式為json
         success : function(result) {
             //請求成功時執行該函數內容,result即為服務器返回的json對象
             if (result) {
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i].name);    //挨個取出類別並填入類別數組
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].num);    //挨個取出銷量並填入銷量數組
                      }
                    myChart.hideLoading();    //隱藏加載動畫
                    myChart.setOption({        //加載數據圖表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根據名字對應到相應的系列
                            name: '銷量',
                            data: nums
                        }]
                    });
                    
             }
         
        },
         error : function(errorMsg) {
             //請求失敗時執行該函數
         alert("圖表請求數據失敗!");
         myChart.hideLoading();
         }
    })

         
    </script>
    
</body>
</html> 

2.服務器端Servlet接收請求

客戶端的請求url是’TestServlet‘,那我們得先在web.xml配置以下映射:

    <servlet>
        <servlet-name>TestServlet</servlet-name>
        <servlet-class>test.TestServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>TestServlet</servlet-name>
        <url-pattern>/TestServlet</url-pattern>
    </servlet-mapping>

然後就來著手寫處理客戶端請求的TestServlet啦!

3.生成json數據並返回給客戶端

生成Json數據要用到額外的jar包,這裡我使用的jackson,json-lib 2010年就沒有再更新了… (2016-5-3日更:發現Google出品的Gson也蠻好用的,重點是很小巧,只需引入一個jar就搞定,用法也很簡單)

簡單介紹一下jackson的用法:

①:先去http://mvnrepository.com/下載 jackson-core.jar,jackson-annotations.jar,jackson-databind.jar(都是2.x版本,jackson官網不知為何不提供服務了…這三個jar讓我一陣好找)

②:在項目的項目WEB-INF/lib下引入這三個jar

然後就可以在TestServlet裡使用jackson提供的工具類了。(關於jackson的詳細用法,這裡貼一下官網教程:http://wiki.fasterxml.com/JacksonInFiveMinutes)

TestServlet代碼如下:

package test;

import java.io.IOException;
import java.util.*;

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

import com.fasterxml.jackson.databind.ObjectMapper;

public class TestServlet extends HttpServlet {

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

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        List<Product> list = new ArrayList<Product>();
        
        //這裡把“類別名稱”和“銷量”作為兩個屬性封裝在一個Product類裡,每個Product類的對象都可以看作是一個類別(X軸坐標值)與銷量(Y軸坐標值)的集合
        list.add(new Product("襯衣", 10));
        list.add(new Product("短袖", 20));
        list.add(new Product("大衣", 30));
        
        ObjectMapper mapper = new ObjectMapper();    //提供java-json相互轉換功能的類
        
        String json = mapper.writeValueAsString(list);    //將list中的對象轉換為Json格式的數組
        
//System.out.println(json);
        
        //將json數據返回給客戶端
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().write(json);    
    }

TestServlet類中用到的自定義的Product類代碼如下:

package test;

public class Product {
    
    private String name;    //類別名稱
    private int num;        //銷量
    
    public Product(String name, int num) {
        this.name = name;
        this.num = num;
    }
    
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    
    
} 

4.客戶端接收數據後顯示

客戶端接受服務器數據並解析後,就可以正常顯示圖表數據了:

Copyright © Linux教程網 All Rights Reserved