1、JSON 數據在 Echarts 圖表中的運用1概述近期在產品開發(fā)過程中JSON 數據在Echarts 圖表中使用的比較頻繁，所以筆者結合近期學到的知識，創(chuàng)建一個 Echarts 圖表簡單樣例工程，其中利用 JSON到獲取數據傳至JS 頁面，從而實現Echarts 圖表的動態(tài)真實數據，通過樣例來與大家一起學習經驗以及心得體會。2預期讀者1. 數通暢聯全體員工2. IT 相關行業(yè)工作者3JSON 理解ion, JS 對象標記) 是一種輕量級的格式。JSON(JavaScript Object No采用完全獨立于編程語言的文本格式來和表示數據，簡潔和清晰的層次結構使得 JSON 成為理想的語言。易

2、于人閱讀和編寫，同時也易于機器和生成，并有效地網絡傳輸效率。3.1 語則所有JSON 格式的數據都需要遵循以下規(guī)則：1. 數據之間要用逗號” , ”分隔。2. 名稱與值的用冒號” : ”表示。3. 對象用大括號” ”表示。4. 數組用方括號” ”表示。3.2 JSONJSON 對象結構以 ” 大括號開始，以 ” 大括號結束。中間部分以多個”，”逗號分隔的”名稱” : ”值”對，關鍵字和值之間以”：”分隔，語法結構如下：3.3 JSONJSON 數組結構以” ”開始，以” ”結束。中間由多個以”，”逗號分隔的值組成，語法結構如下：4總體思路1. 準備相關工具及所需文件搭建樣例。2. 創(chuàng)建數據庫利

3、用DP 連接初始化數據庫，新增CLASS_TEST 表格擴充預置數據。3. 利用AEAI DP 創(chuàng)建簡單查詢功能，加入 Echarts 圖表及echarts.js 文件，調整頁面布局。4. 在handler 中擴展方法，利用 JSON 數據格式從獲取數據傳至前臺JS 頁面的 Echarts 圖表中，將圖表顯示內容變?yōu)檎鎸崝祿?. 擴展查詢數據接口實現類及 SQL 語句。6. 功能檢測消缺。5實現步驟5.1 前置工作此次樣例運用到了 Echarts 及AEAI DP 開發(fā)（數通暢聯），兩款產品都可“Name” : “demo” , “l(fā)astName” : “demon”,“Name” : “

4、demo” , “l(fā)astName” : “demon”數組 “Name” : “demo” , “l(fā)astName” : “demon” 對象以到相應官網，然后解壓附件搭建樣例使用。創(chuàng)建名為 jsontest 的數據庫，利用 AEAI DP 連接并初始化數據庫生成基礎支撐表，創(chuàng)建 CLASS_TEST 表，運用 DP 創(chuàng)建一個名為 ClassTestSelect 信息查詢功能頁面和一個名為ClassTestManage 單表操作功能頁面，擴充預置數據。5.2 功能開發(fā)將Echarts 圖表所需的echarts.js 文件放入如下目錄中。在ClassTestSelectList.jsp 頁面中

5、引入echarts.js 樣式文件。代碼如下：調整頁面，添加Echart 圖表及圖表自適應功能。代碼如下： setRsIdTag(ID);var ectable= new Ectable(context,ec_table);var approval =.geementById(approval);var resizeApproval = function () $(approval).css(width:$(#approval).parent().css(width);resizeApproval();var myChartApproval = echarts.init(approval);

6、optionApproval = color: #3c8dbc, title: text: 年級人數統(tǒng)計,tooltip: , legend: data:人數,xAxis: data: ,yAxis: , axisLabel: erval: 0, formatter:function(value)var ret = ;var maxLength = 3;var valLength = value.length;var rowN = Math.ceil(valLength / maxLength);if (rowN 1)for (var i = 0; i rowN; i+) var temp =

7、 ;var start = i * maxLength;var end = start + maxLength;temp = value.substring(start, end) + n; ret += temp;return ret;else return value;,series: name: 人數,type: bar,data: ;在 ClassTestSelectLisndler 中添加 queryApproval 方法將所查詢數據轉換為json 格式，利用 ajax 獲取到數據后再生成echarts，將數據賦值給 echarts 相關配置，使圖表顯示變?yōu)閯討B(tài)數據。代碼如下：Pag

8、eActionpublic ViewRenderer queryApproval(DataPararam) String responseText = ;try JSONObject jsonObject = new JSONObject(); JSONArray xAxis = new JSONArray(); JSONArray seriess = new JSONArray(); JSONObject xAxisObject = new JSONObject();JSONObject seriesIsGObject = new JSONObject(); JSONArray xAxisD

9、ataArray = new JSONArray(); JSONArray seriesIsGArray = new JSONArray();List cla= getService().findClaRecord(param);for (i=0;icla.size();i+) Map dateRow = cla.get(i); xAxisDataArray.put(dateRow.get(CLASS); seriesIsGArray.put(dateRow.get(PEOPLE);xAxisObject.put(data, xAxisDataArray); xAxis.put(xAxisOb

10、ject); jsonObject.put(xAxis, xAxis); seriesIsGObject.put(data, seriesIsGArray); seriess.put(seriesIsGObject); jsonObject.put(series, seriess);responseText = jsonObject.toString();myChartApproval.setOption(optionApproval);var dharAURLA = index?ClassTestSelectList&actionType=queryApproval sendRequest(

11、dharAURLA,plete:function(responseText)var json = ($.parseJSON(responseText); myChartApproval.setOption(json););window.onresize = function () resizeApproval(); myChartApproval.resize();在ClassTestSelect.java 中添加接口。代碼如下：在ClassTestSelectImpl.java 中添加相應的實現：代碼如下：最后在ClassTestSelect.xml 中添加查詢 SQL 語句代碼如下：5.3

12、 功能檢測登錄在系統(tǒng)管理中的功能管理配置頁面，控制器分別為人數管理（）、人數統(tǒng)計（）。打開人數管理新增數據。ClassTestSelectListClassTestManageList SELECTCLASS,COUNT(SEX) AS PEOPLEFROM class_test WHERE 1=1 GROUP BY CLASS ORDER BY IDOverridepublic List findClaRecord(DataPararam) String sementId = sqlNameSpace+.+findClaRecord;List result = this.Helper.que

13、ryRecords(sementId, param);return result;List findClaRecord(DataPararam);catch (Exception e) log.error(e.getLocalizedMessage(), e);return new AjaxRenderer(responseText);然后打開人數統(tǒng)計查看Echarts 圖表顯示的數據內容，鼠標放在圖表上有滑動效果。6注意事項1. 引入echarts.js 樣式文件的時候需要注意路徑的存放位置，否則會導致圖表無法顯示。2. JSON 獲取的數據配置需要與Echarts 圖表所需的配置相同。Echarts 中數據：Handler 中獲取的數據：7心得總結JSON 數據格式不僅比較簡單，而且還易于讀寫，格式都是壓縮的，所以占用寬帶較??；經過對JSON 的學習和Echarts 的實際運用，了解了JSON 數據格式的語則和使用方法，這些都是 JSON 基礎知識，所以在了解了基礎知識后還有很多關于JSON 數據格式的知識需要后續(xù)進行補充和學習。8