2. 程式人生 > >Echarts折線圖動態獲取資料例項（附java後臺程式碼）

Echarts折線圖動態獲取資料例項（附java後臺程式碼）

阿新 • • 發佈：2018-12-31
// 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('line')); // 指定圖表的配置項和資料 var option = { title : { text : '收支明細折線圖', subtext : 'demo' }, tooltip : { show : true
, trigger : 'axis' }, legend : { data : [ "金額" ] //圖例 }, dataZoom : [ { type : 'inside', //支援滑鼠滾動縮放 start : 0, //預設資料初始縮放範圍為10%到90% end : 100 } ], toolbox : { show : true
, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true
, type : [ 'bar', 'line' ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : [] } ], yAxis : [ { name : '金額 ', //Y軸提示 type : 'value', //min: 0, //max: 30, // interval: 1, //Y軸資料跨度 axisLabel : { formatter : '{value} 元' //Y軸單位 } } ], series : [ { "name" : "金額", "type" : "line", "data" : [], "smooth" : true, //主題--線條平滑 "barWidth" : "70", //柱子寬度 "symbol" : 'emptycircle', //設定折線圖中表示每個座標點的符號；emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形 "markPoint" : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, "markLine" : { data : [ { type : 'average', name : '平均值' } ] }, //設定柱狀圖和節點的顏色 itemStyle : { normal : { color : '#228B22', //設定折線的顏色 lineStyle : { color : '#228B22' }, //以下為柱狀圖頂部是否顯示，顯示位置和顯示格式的設定了 label : { show : true, textStyle : { color : '#00CD66' }, position : 'botton', formatter : '\n{b}\n{c}（元）' } } } } //第一條折線 ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); //myChart.showLoading(); var come = 1; getData(come); function getInfo() { var income = $("input[id='option1']:checked").val(); var outcome = $("input[id='option2']:checked").val(); if (income != null && outcome == null) { come = income; } if (income == null && outcome != null) { come = outcome; } if (income != null && outcome != null) { alert("只能選一種檢視！"); } getData(come); } function getData(come) { var b ="${orderCount.beginCreateDate}"; var e ="${orderCount.endCreateDate}"; var begin = new Date(b).toString(); var end = new Date(e).toString(); var option = myChart.getOption(); $.ajax({ type : "post", async : false, //同步執行 url : "${ctx}/order/orderCount/Echarts", data : { isIncome : come, id : "${orderCount.accountid}", type : "${orderCount.accountType}", beginTime:begin, endTime:end }, dataType : "json", //返回資料形式為json success : function(result) { if (result) { option.legend.data = result.legend; option.xAxis[0].data = result.category; option.series[0].data = result.series[0].data; myChart.hideLoading(); myChart.setOption(option); myChart.hideLoading(); } }, error : function(errorMsg) { alert("圖表請求資料失敗!"); //myChart.hideLoading(); myChart.showLoading(); } }); }

相關推薦

Echarts折線圖動態獲取資料例項（附java後臺程式碼）

// 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('line')); // 指定圖表的配置項和資料 var option = {

資料結構系列——字尾樹（附Java實現程式碼）

字尾樹，說的通俗點就是將一個字串所有的字尾按照字首樹（Trie樹，可參考此篇文章）的形式組織成一棵樹。 什麼是字尾樹 舉例：“banana\0”，其中 “\0” 作為文字結束符號，該字串所有的字尾如下： banana\0 anana\0 na

ECharts多個折線圖動態獲取json資料

ECharts 多個折線圖動態獲取json資料效果圖如下：一.html部分<p id="TwoLineChart" style="width:100%; height:400px;"></p>二.js部分<script type="text/Ja

C#chart繪折線圖動態新增資料

C#入門基礎，實現chart控制元件動態新增資料 最終程式執行效果如圖 點選開始，將隨機生成的兩組資料新增進折線圖裡，chart1和chart2 只顯示10個數，超過10個數將第一個傳進來的數刪掉 chart3是將chart1和chart2 的所有資料顯示，兩條不同

echarts 折線圖 連結無資料斷開的點

http://echarts.baidu.com/examples/editor.html?c=line-stack 正常資料： 當週三週四沒有資料的時候： echats3中series的connectNulls屬性支援連線空值 connectNulls: tr

snmp4j獲取資料例項（二）之SnmpTrap示例

import java.io.IOException; import java.util.Vector; import org.snmp4j.CommunityTarget; import org.snmp4j.PDU; import org.snmp4j.Snmp; i

Android Studio 一個完整的APP例項（附原始碼和資料庫）

前言： 這是我獨立做的第一個APP，是一個記賬本APP。 This is the first APP, I've ever done on my own. It's a accountbook APP.   原始碼： https://github.com/AnneHan/accoun

使用python3調用MyQR庫生成動態二維碼（附源代碼）

就是 帶圖片 git int 大小 產生 小問題 中文版 暫時 可生成普通二維碼、帶圖片的藝術二維碼（黑白與彩色）、動態二維碼（黑白與彩色）。 GitHub：https://github.com/sylnsfar/qrcode 中文版：https://githu

小程式獲取使用者繫結的電話號碼及解密方法（提供Java後臺解密）

小程式前臺程式碼 <button open-type="getPhoneNumber" bindgetphonenumber="telPhone" class="id_style">請填寫手機號碼 </button> .id_style {

spring連線MySQL完整例項（附jar包下載）

本文講的是使用spring自帶的DriverManagerDataSource 來實現資料庫的連線。 建立測試主類MySpringTest package Myspring; import java.sql.*; import javax.sql.DataSource; import

Socket程式設計之TCP例項（附C/C++程式碼詳解）

說明： 主要分步驟給出Windows平臺下socket程式設計的一個TCP例項；使用WINDOWS下網路程式設計規範Winsock完成網路通訊； 對程式各部分細節進行描述。 套接字有三種傳輸型別SOCK_STREAM    SOCK_DGRAM   SOCK_RAW；

js面向物件---無縫輪播圖（附面向過程程式碼）

window.onload = function(){ var t1 = new Lb("box"); t1.l(); //設定包含圖片的ul寬度 t1.dot(); //點哪個圓,相對應的圖片顯示

Redis和nosql簡介,api呼叫；Redis資料功能（String型別的資料處理）；List資料結構（及Java呼叫處理）；Hash資料結構；Set資料結構功能；sortedSet（有序集合）數

1、Redis和nosql簡介,api呼叫14.1/ nosql介紹NoSQL：一類新出現的資料庫(not only sql)，它的特點：1、  不支援SQL語法2、  儲存結構跟傳統關係型資料庫中的那種關係表完全不同，nosql中儲存的資料都是KV形式3、  NoSQL的世界中沒有一種通用的語言，每種no

微信小程式上傳圖片功能（附後端程式碼）

幾乎每個程式都需要用到圖片，在小程式中我們可以通過image元件顯示圖片。 當然小程式也是可以上傳圖片的，微信小程式文件也寫的很清楚。 上傳圖片 首先選擇圖片 通過wx.chooseImage(OBJECT)實現 官方示例程式碼 ? 1 2

mybatis註解實現 spring mvc + mybatis+velocity 框架 （附完整專案程式碼）

最近學習了一下mybatis結合網上的一些列子搭建的一個網站的框架，前端顯示用的velocity引擎，資料訪問使用mybatis+oracle，檢視訪問控制spring mvc，框架主要包括一些基本的增刪改操作以及攔截器，廢話不多說了直接開始吧！！ 程式碼下載

看完48秒動畫，讓你不敢再登入HTTP網站（附完整示例程式碼）

在我的 單點登入SSO示例程式碼 一文中，強烈不建議部署HTTP的SSO服務站點。 在此寫個基於網路包嗅探的HTTP會話劫持程式，給大家一個直觀的危害性展示。 示例中，我在一臺Mac上登入58同城，被另一臺Windows上的程式劫持。“黑客”檢視我的資訊暢行無阻，還順手改了我的頭像。 先直接上演示動

關聯容器：unordered_map詳細介紹（附可執行程式碼）

1.介紹 最近使用到一個c++的容器——unordered_map，它是一個關聯容器，內部採用的是hash表結構，擁有快速檢索的功能。 1.1 特性 關聯性：通過key去檢索value，而不是通過絕對地址（和順序容器不同） 無序性：

紅黑樹（附完整C程式碼）

紅黑樹簡介 首先紅黑樹是一棵二叉搜尋樹，它在每個結點上增加了一個儲存位來表示結點的顏色，可以是RED或者BLACK。通過對一條從根節點到NIL葉節點（指空結點或者下面說的哨兵）的簡單路徑上各個結點在顏色進行約束，紅黑樹確保沒有一條路徑會比其他路徑長

還在用PCA降維？快學學大牛最愛的t-SNE演算法吧（附Python/R程式碼）

大資料文摘作品編譯：寒小陽、蔣寶尚、Sheila、賴小娟、錢天培假設你有一個包含數百個特徵（變數

非遞迴實現二叉樹遍歷（附c++完整程式碼）

先序、中序和後序遍歷過程：遍歷過程中經過結點的路線一樣，只是訪問各結點的時機不同。 從圖中可以看到，前序遍歷在第一次遇見元素時輸出，中序遍歷在第二次遇見元素時輸出，後序遍歷在第三次遇見元素時輸出。 非遞迴演算法實現的基本思路：使用堆疊 一、前序遍歷 1、遞迴實