龐龐聰，杜瑞林，王龐磊

（中國(guó)地震局 地震研究所，武漢 430071）

基于ECharts Library和File API的本地?cái)?shù)據(jù)繪圖技術(shù)

龐龐聰，杜瑞林，王龐磊

（中國(guó)地震局 地震研究所，武漢 430071）

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

本地?cái)?shù)據(jù)；繪圖技術(shù)；ECharts Library；File API

0 引 言

Web繪圖區(qū)別于傳統(tǒng)的本地繪圖，具有輕載體、跨平臺(tái)、顯示形式多樣等特點(diǎn)。不論是工程科研方面的MATLAB和AutoCAD，還是UI設(shè)計(jì)領(lǐng)域的Photoshop和CorelDRAW，它們?cè)诓僮飨到y(tǒng)上的運(yùn)行都依靠專業(yè)軟件環(huán)境的支持，且安裝、升級(jí)都需要耗費(fèi)大量的時(shí)間和精力。依靠Web技術(shù)發(fā)展起來(lái)的Canvas繼承了HTML腳本語(yǔ)言的兼容性好、易操作等優(yōu)點(diǎn)，但代碼一經(jīng)發(fā)布就幾乎無(wú)法修改，盡管可以通過(guò)設(shè)置初始數(shù)據(jù)為隨機(jī)類型，從而保證圖形具有一定的動(dòng)態(tài)性，仍遠(yuǎn)遠(yuǎn)無(wú)法滿足專業(yè)用戶對(duì)繪圖的易操作、可維護(hù)等需求[1]。

在ECharts繪圖庫(kù)的基礎(chǔ)上，如果要更改圖形繪制所需數(shù)據(jù)，必須重新修改原始代碼和數(shù)據(jù)。對(duì)于專業(yè)技術(shù)人員而言，許多工程數(shù)據(jù)都以T X T的形式保存，如果運(yùn)用這些數(shù)據(jù)繪圖就存在每次均需修改代碼、反復(fù)修改易造成代碼編寫錯(cuò)誤的弊端。利用優(yōu)化后的File API對(duì)本地?cái)?shù)據(jù)進(jìn)行處理，實(shí)現(xiàn)本地?cái)?shù)據(jù)的可視化；直接對(duì)TXT文件進(jìn)行修改，簡(jiǎn)單方便，易于操作。

1 常見的Web繪圖技術(shù)

1.1 Canvas

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

1.2 C#

C#通過(guò).net的chart控件實(shí)現(xiàn)對(duì)曲線圖的繪制和編寫，并調(diào)用SW.WriteLine語(yǔ)句把C#內(nèi)容寫入網(wǎng)頁(yè)。如繪制時(shí)首先調(diào)用System.Windows.Forms.DataVisualization.Charting，通過(guò)DataBindXY(listX,listY)方法繪制x-y坐標(biāo)點(diǎn)[3]。

2 ECharts繪圖原理

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

2.1 引入ECharts

在使用相關(guān)方法和屬性前，必須在