宋佳慧　刘远刚　林琳　李绅弘　许帆

摘要：eCharts是一个开源数据可视化工具，功能强大，具有易学易用、交互性强、定制灵活等优点。该文对ASP.NET开发环境下eCharts控件的动态统计图表绘制技術展开研究，结合AJAX技术针对其中的数据获取、图表参数设置、图表动态绘制等问题给出一套完整的编程模式，从而为各种Web应用中统计数据的可视化提供技术手段。

关键词：eCharts；ASP.NET；统计图表；可视化；AJAX

在大数据时代下，以互联网为传播载体的海量的数据变化周期短，动态获取数据并以统计图表方式实现数据的可视化，可以方便人们快速地掌握数据的变动趋势及规律，从而及时准确地制定决策。在这种需求的推动下，基于Web的统计图表控件得到了迅猛的发展和广泛的应用。按照技术实现方式可将现有的图表控件大致分为三类：组件嵌入式控件、服务端控件和基于HTML 5的客户端控件。早期使用较多的是组件嵌入式图表控件，如MicrosoftOffice中所提供的0WC图表组件，可通过ASP.NET等服务端脚本嵌入网页，不足的是需要提前在浏览器客户端安装相关组件或插件，导致所实现应用的可移植性差。服务端控件基于Web服务端动态脚本语言实现，如微软基于的.NET 3.5平台开发的Web Chart控件、Java平台上的开源图表控件JFreeChart等等，这类控件的图表在服务端生成，然后以静态图片的形式发送到客户端浏览器显示，因此服务器端负载较重，客户端交互性较差。随着新一代互联网核心语言HTML 5的推广，通过Canvas API实现Web客户端的动态图形绘制成为一种主流技术，于是出现了多种基于HTML 5的客户端图表绘制控件库开源项目，其中国内外知名的代表性产品包括D3.is、Highcharts、GChart和EChart等等。eCharts是由百度公司商业前端数据可视化团队开发的数据可视化工具，具有易学易用、交互性强、定制灵活等优点，使其在多如牛毛的数据可视化工具中首屈一指。本文对ASP.NET开发环境下基于eCharts控件的动态图表绘制技术展开研究，结合其中数据的获取、图表参数的设置、图表的动态绘制等问题给出一套完整的编程模式，从而为各种Web应用程序中统计数据的可视化提供技术手段。

1eCharts图表控件简介

eCharts（enterprise charts，商业级数据图表）是一个JavaS-cript的图表控件库，主要用于在PC浏览器和移动设备上绘制各种动态图表，能够与各种数据源高度集成，所制作的图表形式多样、生动美观、交互性强，向使用者提供了一个良好的数据可视化、数据挖掘和整合的平台。eCharts的底层依赖于轻量级的HTML5 Canvas类库ZRender，可支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时对各种图表提供标题、详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，可灵活地实现各种图表元素的联动和混搭。eCharts的体系架构如图1所示。

2基于eCharts图表控件库的编程模式

使用eCharts控件在Web应用程序绘制统计图表的编程模式如图2所示。整个过程分为6步：1）引入eCharts控件库；2）添加用于图表显示的DIV容器标签；3）在JavaScript程序中初始化eCharts实例；4）通过AJAX技术获取绘图数据；5）调用eCharts实例的setOption方法配置图表数据和其他属性参数；6）最后，将图表绘制结果导入DIv容器中。其中的核心工作是首先引入eCharts控件库，然后基于AJAX技术实现客户端与服务器端的动态交互完成绘图。