基于ECharts組件的外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)方案設(shè)計(jì)

李興勇

摘要：該文嘗試將ECharts組件應(yīng)用于外匯數(shù)據(jù)分析工作，設(shè)計(jì)外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)方案，使得現(xiàn)有外匯數(shù)據(jù)以更為直觀和可交互的表現(xiàn)形式展現(xiàn)出來，為幫助用戶更好的解讀這些數(shù)據(jù)。

關(guān)鍵詞：ECharts；外匯數(shù)據(jù)；動(dòng)態(tài)監(jiān)測(cè)；地圖

隨著信息化建據(jù)，業(yè)已形成外匯業(yè)務(wù)數(shù)據(jù)倉庫。面對(duì)大量數(shù)據(jù)，從業(yè)人員迫切需要設(shè)的不斷深入，外匯業(yè)務(wù)信息系統(tǒng)已積累海量的數(shù)利用ECharts這類專業(yè)的圖表（圖形）技術(shù)以更鮮活和更靈活的方式展示分析結(jié)果，來呈現(xiàn)數(shù)據(jù)真實(shí)的一面，從而幫助用戶更好的解讀這些數(shù)據(jù)。同時(shí)，ECharts技術(shù)也具備對(duì)待展現(xiàn)數(shù)據(jù)進(jìn)行高效挖掘和分析的互動(dòng)能力，能夠大幅提升用戶的解讀產(chǎn)出和理解成本比，從而提高監(jiān)測(cè)分析質(zhì)量和效率。本文將闡述利用ECharts技術(shù)外匯數(shù)據(jù)，使得數(shù)據(jù)以更為直觀和可交互的表現(xiàn)形式呈現(xiàn)給用戶。

1ECharts組件簡(jiǎn)介

ECharts（Enterprise Charts）即商業(yè)級(jí)數(shù)據(jù)圖表，是百度前端數(shù)據(jù)可視化團(tuán)隊(duì)推出的開源項(xiàng)目，完全是基于Javascript腳本語言編寫的圖表庫，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器。ECharts的主要特點(diǎn)有：

1）使用簡(jiǎn)單，開發(fā)過程快速高效。因?yàn)樗媒⒃趫D形庫上的圖表集合，把常用圖表類型固化下來，用戶可以利用這些已固化的圖表類型快速做出各種圖表。

2）可以提供直觀、生動(dòng)、可交互和可高度個(gè)性化定制的數(shù)據(jù)可視化圖表，能夠滿足用戶的多種需求。

3）具有多種功能和視圖效果，支持力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖等共11類17種圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例開關(guān)、值域、數(shù)據(jù)區(qū)域、子區(qū)域地圖模式、百度時(shí)間軸、工具箱等多個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)，可大大增強(qiáng)用戶體驗(yàn)，賦予用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

4）地圖類組件中map代碼庫均為離線文件，可以在各種設(shè)備上都能夠流暢運(yùn)行。因?yàn)镋Cha～s底層依賴輕量級(jí)的Canvas類庫ZRender（該類庫基于HTML5畫板），所以ECharts3只要引入相應(yīng)地圖JS文件，就可以在離線情況下用MVC核心封裝實(shí)現(xiàn)圖形倉庫、視圖渲染和交互控制，從而方便流暢地繪制各種地圖。

2外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)方案功能結(jié)構(gòu)

外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)方案采用分層結(jié)構(gòu)，分別為表示層、應(yīng)用邏輯層和數(shù)據(jù)層，功能結(jié)構(gòu)如圖1。

數(shù)據(jù)層用于存儲(chǔ)和管理外匯業(yè)務(wù)數(shù)據(jù)倉庫，通過數(shù)據(jù)庫管理系統(tǒng)對(duì)底層數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲(chǔ)、訪問等基本操作，為整個(gè)方案提供安全高效的基本數(shù)據(jù)管理服務(wù)。

應(yīng)用邏輯層由WEB服務(wù)器和業(yè)務(wù)邏輯處理單元組成。WEB服務(wù)器負(fù)責(zé)接收從瀏覽器傳遞的用戶請(qǐng)求，并將該請(qǐng)求發(fā)送給業(yè)務(wù)邏輯處理單元。該單元再調(diào)用數(shù)據(jù)管理層，獲得相關(guān)數(shù)據(jù)進(jìn)行數(shù)據(jù)分析處理，并將處理結(jié)果通過WEB服務(wù)器返回至表示層。業(yè)務(wù)邏輯處理單元包含基本功能處理響應(yīng)模塊和數(shù)據(jù)分析邏輯模塊?；竟δ芴幚眄憫?yīng)模塊應(yīng)具備響應(yīng)用戶數(shù)據(jù)查詢、添加、修改和刪除請(qǐng)求等功能，數(shù)據(jù)分析邏輯處理模塊可以按照預(yù)定義指標(biāo)對(duì)外匯基礎(chǔ)數(shù)據(jù)的分析整合等相關(guān)邏輯操作，即對(duì)數(shù)據(jù)再加工。

表示層主要實(shí)現(xiàn)數(shù)據(jù)信息交互界面和外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)圖展示，是用戶和系統(tǒng)交互的入口，用戶可以通過表示層完成數(shù)據(jù)操作（例如查詢條件）錄入、選擇不同監(jiān)測(cè)指標(biāo)對(duì)分析結(jié)果進(jìn)行展示。其中外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)展示圖是在表示層中通過ECharts3組件完成對(duì)分析數(shù)據(jù)的加載和圖形的生成。

3ECharts3組件具體應(yīng)用步驟

步驟一：ECharts3配置文件的加載與引入

在ECharts3應(yīng)用之前，首先需要引入ECharts 3的配置文件，也就是要加載基本的圖像類型，引入ECharts3的方式包括模塊化包引入、模塊化單文件引入和標(biāo)簽式單文件引入三種方式。本例采用的是標(biāo)簽式單文件引入，只需要在head標(biāo)簽中引人最新完整版本echans-minjs和相應(yīng)的地圖文件（即安徽省地圖文件anhui.js），注意需要將兩個(gè)引入文件和本文件放在一個(gè)目錄下，對(duì)應(yīng)主要代碼如下：

構(gòu)建的外匯形勢(shì)動(dòng)態(tài)監(jiān)測(cè)展示圖，通過不同顏色直觀反映出各個(gè)地市的外匯收支形勢(shì)，并通過鼠標(biāo)點(diǎn)擊相關(guān)區(qū)域，獲得區(qū)域相關(guān)指標(biāo)的時(shí)點(diǎn)數(shù)（如圖中黃色區(qū)域?yàn)槭髽?biāo)選擇地市），從而使得全省整體監(jiān)測(cè)結(jié)果呈現(xiàn)可視陛和直觀性。endprint