开源JavaScript图表库 ECharts 的1.1.0版本发布

jopen 11年前

2013年7月初,百度商业前端数据可视化团队发布了开源JavaScript图表库ECharts的1.1.0版本,引起了广泛关注ECharts基于HTML5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

经ECharts开发者介绍,InfoQ编辑整理了一些有关这个图表库的相关信息,分享给大家。

ECharts的目的

ECharts的开发是为了解决数据可视化的问题。它是一个web前端数据可视化的解决方案,面向前端开发人员使用,可以输出具有可交互图形用户界面的数据可视化图表。

数据可视化一路发展过来,从简易图表阶段(缺乏视觉表现力),到注重视觉表现力的信息设计阶缺段(乏对数据的深入理解,往往产生视觉误导),再到今天大家看到的很多冲击力极强的数据可视化作品(如TED的无数作品,数据分析与视觉表现力充分结合),这显然不会是终点。数据可视化在国际上正在进入一个新的阶段,深度数据交互,在这个阶段将打破平面的视觉效果,实现了人机互动式的跨平台操作,真正的将数据带入到任何工作场合中,帮助人更好的掌握数据价值。业界领先的Tableau就是个很好的例子,或者如初创企业zoomdata所做的也能说明这一趋势,而ECharts也正朝着这个目标出发。

ECharts的思路

如维克托 • 迈尔 - 舍恩伯格教授的《大数据时代》所述,大数据时代有几个特点需要人们转变思维或适应变化,其中很重要的一点就是“社会需要放弃它对因果关系的渴求,而仅需关注相关关系”。人们更需要关注“数据是什么”。ECharts的特性设计正是以此为出发点,呈现数据真实的一面,并且提供了一些直观、易用的交互方式以方便用户对所展现数据进行挖掘、提取、修正或整合,通过系列选择、区域缩放、数值筛选等不同方式让用户可以更加专注于他们所关心的地方,可以有更丰富的呈现方式解读数据。

ECharts的实现

ECharts的实现,表面上是canvas,但ECharts内在的技术特征应该是数据驱动和基于消息的耦合剥离。通过底层canvas类库ZRender,ECharts代码里几乎可以无视canvas的存在。

熟悉KineticJS、EaselJS或者oCanvas的朋友应该对canvas基础库的概念不陌生。ZRender是一个轻量级的 canvas类库,MVC封装,数据驱动,提供类Dom事件模型。这个canvas类库让开发者写起canvas应用时就像写web页面一样。此外,css style的样式属性定义,层叠,MVC架构(CURD、render & refresh),promise式的动画接口,也都是如此设计。

ZRender同样是百度商业前端数据可视化团队的作品,里面也有很多有意思的东西。

虽然说大数据的含义并不是“数据量大”,但大数据强调的考察对象从“随机样本”到“总体”的转变趋势不可避免的带来了需要展现大量数据的需求。这或许是ECharts技术选型上为什么是canvas而不是svg的重要原因,在有限区域内显示尽可能多的数据,ECharts的大规模散点图充分利用了 canvas的像素处理能力,这或许已经达到了现有web呈现能力的极限,而显示性能跟显示一张图片无异。抛开像素处理能力不说,同样呈现普通的图形,你很难想象浏览器创建10万个svg DOM会有多么吃力,而用canvas渲染10万个圆仅需500ms左右(chrome)。

在ECharts中涉及的一些技术细节:

  • 依赖excanvas兼容IE8-。

  • 遵循AMD模块化标准,图表按需加载。

  • 地图由基于svg格式的矢量数据生成,底层ZRender会转换成canvas的路径。

  • 旋转、平移、动画的实现,被转成矩阵运算来解决。

  • 反复渲染的性能问题,采用了分层刷新和dirty flag进行了优化。

  • 基于包围盒和纯数学方法解决同时大大优化了图形hover判断。

  • 图表和控件间采用消息中心进行通信协作。

ECharts的接口方法很简单,但有一个很庞大的配置项集合。为了让设置合理,牺牲了很多实现成本。ECharts团队认为,接口设计的合理比起实现成本重要得多。

来自:http://www.infoq.com/cn/news/2013/07/echarts_1_1_0