基于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

在使用相关方法和属性前，必须在