ECharts通過Ajax動態載入資料到圖表

阿新 • • 發佈：2019-01-12

參考官網：http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2

要展示的圖表像這樣：

現在開始前後端程式碼展示。by the way，使用的開發框架為nutz，重點還是echarts資料。不要本末倒置。

1.從官網下載包

使用其中的dist資料夾和echarts.js，將dist資料夾和echarts.js放在工程的js目錄下。

2.前端js程式碼echartsOneTest.jsp：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>統計</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <%@ include file="/WEB-INF/jsp/tag.jsp" %>
    <%@ include file="/WEB-INF/jsp/common_css.jsp" %>
    <%@ include file="/WEB-INF/jsp/common_js.jsp" %>
    <%@ include file="/WEB-INF/jsp/common_tool.jsp" %>
</head>
<body>
    <div>
        <button onclick="getJson()">查詢</button>
    </div>
    <div id="main" style="height:400px;"></div>
    <%--echarts.js的路徑可以隨便放，只要這裡能獲取到就行了--%>
    <script src="../../static/js/echarts.js"></script>
    <script type="text/javascript">
        var myChart;//定義一個全域性的圖表變數，供後面動態載入時使用
        require.config({
            paths: {
                echarts: '../../static/js/dist'   //將dist資料夾和echarts.js放在同一目錄下
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需載入所需圖表，如需動態型別切換功能，別忘了同時載入相應圖表
                'echarts/chart/bar'
            ],
            function (ec) {
                myChart = ec.init(document.getElementById('main'));
                //下面的option可以為空{}，ajax動態新增資料時會加上相應的屬性
                //var option = {};
                var option = {
                    legend: {
                        data:['蒸發量','降水量']
                    },
                    xAxis : {
                        data : []
                    },
                    yAxis : {},
                    series : [
                        {
                            name:'蒸發量',
                            type:'bar',
                            data:[]
                        },
                        {
                            name:'降水量',
                            type:'bar',
                            data:[]
                        }
                    ]

                };
                myChart.setOption(option);
            }
        );

        function getJson() {
            //獲取資料時顯示載入狀態圖
            myChart.showLoading();
            var months=[];//用來盛放X軸座標值：月份
            var evapCapacitys=[];//用來盛放Y座標值：蒸發量
            var precipitations=[];//用來盛放Y座標值：降雨量

            $.ajax({
                type : "post",
                async : true, //非同步請求
                url : "${ctx}/echarts/getJson",
                data : {},
                dataType : "json",
                success : function(result) {
                    if (result.status) {
                        var list = result.list;
                        for(var i=0;i<list.length;i++){
                            months.push(list[i].month);    //遍歷月份並填入陣列
                        }
                        for(var i=0;i<list.length;i++){
                            evapCapacitys.push(list[i].evapCapacity);    //遍歷蒸發量並填入陣列
                        }
                        for(var i=0;i<list.length;i++){
                            precipitations.push(list[i].precipitation);    //遍歷降水量並填入陣列
                        }
                        myChart.hideLoading();    //隱藏載入動畫
                        myChart.setOption({        //載入資料圖表
                            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: {
                                data: months
                            },
                            yAxis:{},//注意一定不能丟了這個，不然圖表Y軸不顯示
                            series: [{
                                // 根據名字對應到相應的系列，並且要註明type
                                name: '蒸發量',
                                type:'bar',
                                data: evapCapacitys
                            },{
                                // 根據名字對應到相應的系列，並且要註明type
                                name: '降水量',
                                type:'bar',
                                data: precipitations
                            }]
                        });

                    }

                },
                error : function(errorMsg) {
                    //請求失敗時執行該函式
                    alert("圖表請求資料失敗!");
                    myChart.hideLoading();
                }
            });
        }
    </script>
</body>
</html>

3.後端java程式碼，

EChartsModule.java

package com.kp.module;

import com.kp.entity.EchartsEntity;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.lang.util.NutMap;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by admin on 2017/12/22.
 */
@IocBean
@At("/echarts")
public class EChartsModule {

    @At("/index")
    @Ok("jsp:jsp.echartsOneTest")
    public void index() {

    }

    @At("/getJson")
    @Ok("json")
    public NutMap getJson(){
        NutMap nutMap = new NutMap();
        List<EchartsEntity> list =  new ArrayList<>();
        list.add(new EchartsEntity("1月份",2.0f, 2.6f));
        list.add(new EchartsEntity("2月份",4.9f, 5.9f));
        list.add(new EchartsEntity("3月份",7.0f, 9.0f));
        list.add(new EchartsEntity("4月份",23.2f, 26.4f));


        nutMap.put("list", list);
        nutMap.put("status", "ok");
        return nutMap;
    }

}

EchartsEntity.java

package com.kp.entity;

/**
 * Created by admin on 2017/12/22.
 */
public class EchartsEntity {
    private String month;
    private Float evapCapacity;
    private Float precipitation;

    public EchartsEntity(String month, Float evapCapacity,  Float precipitation) {
        this.month = month;
        this.evapCapacity = evapCapacity;
        this.precipitation = precipitation;
    }

    public String getMonth() {
        return month;
    }

    public void setMonth(String month) {
        this.month = month;
    }

    public Float getEvapCapacity() {
        return evapCapacity;
    }

    public void setEvapCapacity(Float evapCapacity) {
        this.evapCapacity = evapCapacity;
    }

    public Float getPrecipitation() {
        return precipitation;
    }

    public void setPrecipitation(Float precipitation) {
        this.precipitation = precipitation;
    }
}

ECharts通過Ajax動態載入資料到圖表

參考官網：http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 要展示的圖表像這樣：現在開始前後端程式碼展示。by the way，使用的開發框架為nutz，重點還是echarts資料。不要本末倒置。

Echarts圖表通過Ajax動態更新資料

由於業務需求需要做一個視覺化的展示Demo，這個Demo需要前後端的共同支撐，所以思路大致是：首先我們想到的是用ajax動態請求服務端獲取到json檔案後，然後將其解析為可以直接使用的資料，最後把這些資料更新到Echarts中去。簡單的程式碼實現如下： H

Jquery chosen動態設定值 select Ajax動態載入資料設定chosen和獲取他們選中的值

在做一個編輯對話方塊時，要對裡面帶有select option的操作。主要是想動態載入option和對option的選中。但是由於專案中使用了jquery裡的chosen()方法，怎麼也無法實現效果。原碼如下： Java程式碼 <select id="viewOLanguage"

通過ajax動態載入select控制元件【下拉框】的option

一、JS方式關鍵程式碼： <select id="ddlResourceType" onchange="getvalue(this)"></select> var objSelect = document.getElementById("ddlR

datatables通過ajax重新載入資料

一、效果圖：二、功能：點選某行的“通過”按鈕和“拒絕”按鈕，分別呼叫兩個不同服務介面，然後重新載入資料表，改行就消失了。三、html程式碼（js、css依賴需手動新增） <!DOCTYPE html> <html> <h

ajax動態載入資料後的click事件問題

問：為什麼ajax加載出來的html,無法用選擇器繫結事件,但可以直接在html上使用onclick等事件? 如ajax 載入了<div class="div">div</div> 然後$('.div').click(funct

Echarts使用及動態載入圖表資料

Echarts簡介 echarts，縮寫來自Enterprise Charts，商業級資料圖表，一個純JavaScript的圖表庫，來自百度。。。我想應該夠簡潔了使用Echarts 目前，就官網的文件顯示，使用echarts有兩種方式，echarts3之前

【mpvue】實現echarts圖表動態載入資料

功能描述使用mpvue框架開發微信小程式。目的效果為小程式中顯示一個折線圖，當點選切換按鈕時，切換圖表。實現步驟 1.查詢mpvue官方文件關於echarts的實現方式------靜態載入圖表，只加載一次 2.實現動態載入圖表（能夠根據需求多次繪製圖表）思

Echarts使用及動態載入圖表資料折線圖X軸資料動態載入

Echarts簡介 echarts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，來自百度。。。我想應該夠簡潔了使用Echarts 目前，就官網的文件顯示，使用echarts有兩種方式，echart

echarts動態載入資料，顯示柱狀圖，餅圖圖表

第一次寫部落格，有點小激動。公司正在開發的web版固定資產管理軟體，需要做報表，需要直觀的顯示一些領導感興趣的資料。就想到百度的echarts啦，關於echarts的更多資訊請移步echarts首頁。言歸正傳。第一步，在jsp頁面，需要引入esl.js,它是一個瀏覽器端

thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)

監聽滾動條的js檔案地址：http://ons.me/526.html 1、dropload.css檔案 .dropload-up,.dropload-down{ position: relative; height: 0; &n

1.簡單例項：ASP.NET下Echarts通過Ajax從資料庫中獲取資料

後臺：Test01.ashx.cs:從資料庫獲取資料，通過HTTP請求（HttpContext）實現和前臺資料傳遞json資料 using System; using System.Collections.Generic; using System.Linq; using

ECharts動態載入資料（簡單）

常規 html //html中的內容很簡單 <div id="main" style="width: 600px;height:400px;"></div> js庫匯入 //匯入相關指令碼 <script type="t

echarts ajax 動態獲取資料

keys 和 values 都是動態資料注意如果資料是{value:335, name:'直接訪問'}這種格式需要使用eval('(' + strtojson + ')') 轉一下//載入圖表 start $(function(){ $.ajax(

Echarts -- 條件查詢ajax動態獲取資料

最近因為需要用到了Echarts這個外掛，下面是自己的一點使用心得效果圖：直接上程式碼：js：<%@ page import="org.apache.commons.lang3.RandomStringUtils" %> <%@ page languag

Echarts的使用以及動態載入資料

一、Echarts的介紹 ECharts開源來自百度商業前端資料視覺化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可互動，可個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者

jsTree 通過ajax 獲取json資料載入樹形選單

var ajaxTreeSample = function() { $("#tree_4").jstree({ "core" : { "themes" : { "

ajax動態載入下拉框資料

下拉框—–ajax動態載入資料嗨！這是我發表的第一篇部落格，希望對大家有所幫助，有什麼不對的地方還望校正！ jsp頁面（型別一） <select class="form-control" name="orgName" id="select_

echarts通過timeline時間軸改變圖表的資料，解決X軸，series問題

問題敘述：通過echarts的時間軸進行資料、X軸座標以及每個option的屬性都不一樣的進行圖表切換。這裡面使用的是echarts2.0版本，可惜的是我鼓搗半天也沒弄出來echarts3.0的timelinechanged方法，希望知道的人可以告知一下。例如：我想xAx

Echarts動態載入資料

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

ECharts通過Ajax動態載入資料到圖表

相關推薦