基于ECharts Library和File API的本地數據繪圖技術

龐龐聰，杜瑞林，王龐磊

（中國地震局 地震研究所，武漢 430071）

基于ECharts Library和File API的本地數據繪圖技術

龐龐聰，杜瑞林，王龐磊

（中國地震局 地震研究所，武漢 430071）

為解決web繪圖每次更改圖形繪制均需修改代碼，且反復修改易造成代碼編寫錯誤的弊端，提出一種針對本地TXT文件，利用ECharts Library和File API簡化數據處理程序的繪圖技術。該繪圖技術可以直接對TXT文件進行修改，簡單方便，易于操作。

本地數據；繪圖技術；ECharts Library；File API

0 引 言

Web繪圖區別于傳統的本地繪圖，具有輕載體、跨平臺、顯示形式多樣等特點。不論是工程科研方面的MATLAB和AutoCAD，還是UI設計領域的Photoshop和CorelDRAW，它們在操作系統上的運行都依靠專業軟件環境的支持，且安裝、升級都需要耗費大量的時間和精力。依靠Web技術發展起來的Canvas繼承了HTML腳本語言的兼容性好、易操作等優點，但代碼一經發布就幾乎無法修改，盡管可以通過設置初始數據為隨機類型，從而保證圖形具有一定的動態性，仍遠遠無法滿足專業用戶對繪圖的易操作、可維護等需求[1]。

在ECharts繪圖庫的基礎上，如果要更改圖形繪制所需數據，必須重新修改原始代碼和數據。對于專業技術人員而言，許多工程數據都以T X T的形式保存，如果運用這些數據繪圖就存在每次均需修改代碼、反復修改易造成代碼編寫錯誤的弊端。利用優化后的File API對本地數據進行處理，實現本地數據的可視化；直接對TXT文件進行修改，簡單方便，易于操作。

1 常見的Web繪圖技術

1.1 Canvas

Canvas作為HTML5新出現的特性之一，已被用來繪制各種圖形，包括圖標、折線圖、漸變圖等。Canvas與其他HTML標簽一樣具有自己的方法和屬性。如繪制一個圖形操作如下：利用canvas.getContext()獲取繪圖功能對象，通過context.fillStyle()和context. strokeStyle()進行填充樣式和邊框樣式的具體設置，然后調用context.fill和context.stroke方法進行具體的填充和邊框設置[2]。同時，Canvas支持坐標點的繪制。如context.fillRect(2,14,60,40)，即表示坐標點（2,14）為起始端點進行繪制長度、寬度分別為60和40的填充矩形。

1.2 C#

C#通過.net的chart控件實現對曲線圖的繪制和編寫，并調用SW.WriteLine語句把C#內容寫入網頁。如繪制時首先調用System.Windows.Forms.DataVisualization.Charting，通過DataBindXY(listX,listY)方法繪制x-y坐標點[3]。

2 ECharts繪圖原理

ECharts library是一個依賴于Canvas類庫ZRender、完全采用JavaScript編寫的數據可視化圖表library。ECharts的主要優勢如下：一是圖表類型。ECharts支持幾乎所有主流圖表類型，包括treemap、K線圖、折線圖、柱狀圖及地圖、熱力圖等，同時也支持不同類型圖行的混合繪制。二是兼容性。ECharts不僅兼容大多數主流瀏覽器（IE11,Firefox,chrome等），也支持移動端的流暢運行，完整地體現交互性、可定制性、直觀性等豐富特性。三是坐標系。最新的ECharts 3增加了“坐標系”這一維度理念，同時支持地理坐標系（geo）、極坐標系（polar）和直角坐標系（catesian）。四是交互式數據操作。ECharts提供的legend,visualMap, dataZoom,tooltip等組件，借助漫游、選取等圖表工具實現數據篩取、圖形縮放等功能。五是動態數據。ECharts根據用戶輸入數據的變化而調用timeline組件驅動圖表產生相應改變，如數值大小的可視化變化和圖形位置隨數值改變而發生移動。

2.1 引入ECharts

在使用相關方法和屬性前，必須在