ECharts通過Ajax動態載入資料到圖表
參考官網: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:
3.後端java程式碼 ,<%@ 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>
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.js -->