[转]ECharts：国内数据可视化领域的新秀

ECharts：国内数据可视化领域的新秀

不久前，专业大数据可视化公司Tableau在纽交所成功上市，当日收盘涨幅64%，至50.75美元，共募集资金2.542亿美元，成为今年美国最大一笔科技业IPO。Tableau Software正是一家做大数据的公司，更确切地说是大数据处理的最后一环：数据可视化。

在大数据的时代背景下数据可视化的价值显得尤为突出，国内外出现了很多数据可视化产品，其中又以在Web上呈现数据统计图表的组件库最为多样，国外比较著名的如Highcharts，amCharts，flot，jqPlot，D3等等，国内则相对比较冷清，知名度较高仅有iChartjs，dataV。

前不久，一款命名为“ECharts”的产品突然出现在大家的视野并引起了较高的关注，一方面可能是“开源来自百度商业前端数据可视化团队”这一标榜技术力量的显赫背景，另一方面或许是更主要的方面是这款产品虽同属JS图表组件库，但其所具备的创新特性却是与众不同，在传统数据统计图表上带来了从未有过的交互体验，而且这些看似酷炫的交互并不是为了“装酷”而是实实在在的用于辅助理解和分析数据，用他们的话或许应该说“重新定义数据图表的时候到了！”这一赶超国际领先水平的豪言壮语背后究竟意味着什么？

下面就让我们看看ECharts都有哪些足以“重新定义数据图表”的特性？

【拖拽重计算】

所谓的“拖拽重计算”是ECharts专利级特性，业内应该是首创的，指的是ECharts所输出的那些代表数据的图形（如饼状图每一个扇形，折线图上的拐点，柱状图上的柱形等）都是可拖拽的（默认重计算功能默认关闭，需配置开启），并且拖拽后能智能的产生不同的数据重整效果，如把扇形拖出饼图，被拖出的数据成为一个“数据孤岛”，饼图内剩下的数据会重新计算成一个完整的饼图；拖出的“数据孤岛”可以随时拖拽回去融入饼图，或者可以拖拽到某个扇形上，产生数据的合并；这种数据拖拽的合并迁移甚至可以在不同图表间进行。

允许用户对可视化呈现的数据进行有效提取，整合，二次加工的能力多少有些颠覆，因为从来没有图表提供过这样的功能，一时间不知道这功能有什么用？官方文档中举了两个应用场景（截图如下：整合你所关心的数据，剔除畸形数据），一下子就把曾经压抑的需求释放了，在我们看数据报告的时候，是否有过不满意呈现出来的数据分类？觉得应该剔除或合并某些数据？希望动态的对比随心的组合？多少次被畸形数据搞到统计图表毫无意义？以前，作为读者只能寄望于开发人员，而ECharts，读者也可以掌控。

【数据视图】

      这或许会成为“表哥表姐”们的最爱。很多业务系统都提供报表功能并以精美的图表为你呈现，或者当你看到一份对你有价值的报告，你希望拿到原始数据，需求很简单，以‘，’号分隔就足以方便导入excel做二次加工。幸运的也许能找到下载链接或是能提交下载请求等待文件的生成，然后下载，打开，调整格式，复制，粘贴。明明数据已经可视化的摆在眼前了啊，为啥拿不到或者需要那么麻烦才能拿到？ECharts提供这项叫数据视图的功能，你看到的任何图表都可以随时切换到数据视图，正如你所看到的，数据已经摆在眼前。这不仅对于图表的受众是一种便利，对于数据提供方也大大节省了开发和运营（主要是保存数据文件的磁盘空间）成本。如此简单但又极其有意义的事情为什么从未有过图表库实现？希望各种图表库跟进这项功能，造福大众。

      数据视图更强大的一点是他可以开启编辑模式，也就是说你可以随时改变你所看到的图表去呈现你希望呈现的数据，至于说为什么需要改变？应用场景可能就比较少了，无非是觉得数据不对了，有数据缺失或者存在畸形数据，这跟拖拽重计算相比可是批量操作。

【值域漫游】

      这应该是最吸引眼球的一项功能，基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小很常见，大多的图表都是这样的，这能直观形象的展示数据分布。但如何聚焦到你所关心的数值上？比如我只想查看top 10%的地域有哪些？这种呈现在这种需求下有点无能为力，还不如换成条状图呢。如何兼而有之？ECharts提供了称为“值域漫游”的功能（在地图和散点图上有效），你可以通过简单的拖拽去选定查看你希望关心的值域范围，这种实时的交互变化基本不需要理解成本，他正如你所希望看到的那样呈现了。

【数据区域缩放】【大规模散点图】

      商业级图表库基本都具备了这项功能，如查看时间跨度很长的股市图，但同时支持框选缩放还带后退的确实少见。这种交互在ECharts提供的另外一项功能时显得尤为重要，大规模散点图。虽然说大数据的含义并不是“数据量大”，但考察对象从“随机样本”到“总体”的转变趋势不可避免的带来了需要展现大量数据的需求。如何展现成千上百万的数据？貌似除了专业的统计工具（如MATLAB）外别无选择。

是的，ECharts给出了另外一个选择的可能，作为另外一项专利级特性，ECharts发明了基于像素的大规模散点图，很聪明的利用了canvas的像素处理能力（IE8以下可不支持哦），如在一个900 x 400（可以与显示屏幕分辨率1024*768对比理解）的显示空间内就能毫不重复的呈现36万组数据，而且渲染性能也就相当于显示一张图片，这样的处理能力对于常规的应用来说用现代浏览器就足以支撑百万级的散点数据。配合框选缩放你能进一步挖掘你所关心分布区域，当框选缩放到需要显示的数据少于一定量级后（可配）大规模散点图会自动切换到常规模式，这时候鼠标悬浮提示就会生效，你就能查看每一个数据的详细内容。

【力导向布局】

      系统中的每个节点都可以看成是一个带有一定能量的放电粒子，粒子间存在某种库仑斥力。同时，有些粒子间被一些“边”所牵连，这些边产生类似弹簧的胡克引力。在粒子间斥力和引力的不断作用下，粒子们从随机无序的初态不断发生位移，逐渐趋于平衡有序的终态。同时整个物理系统的能量也在不断消耗，经过数次迭代后，粒子间几乎不再发生相对位移，整个系统达到一种稳定平衡的状态。这就是力导向布局算法的直白描述，作为最美观的呈现复杂关系网络的图表——力导向布局图，一般都是单独存在于一些特殊的类库中，如sigma.js，在业界通用图表库中并不常见，但ECharts直接内置了，有这个需求的读者可以少用一套库了。力导向布局说下去有点复杂，有需要的可以进一步研究里面的算法。

     下图分别呈现的一个是简单的人物关系《乔布斯》和一个比较复杂的《webkit内核依赖》。

      ECharts还有很多特性，如图表任意混搭，动态类型切换，图例开关，标线辅助，多维度堆积等等，基本都是为实际需求而设计，可以通过这份官方的在线文档Why ECharts体会，如果要概况起ECharts这些丰富的特性，用文档中的这段话或许再适合不过了：

这就是ECharts，

我们只是尽我们所能为你呈现数据真实的一面，
并且提供了一些直观、易用的交互方式以方便你对所展现数据进行 挖掘、提取、修正或整合，
（拖拽重计算、数据视图）
让你可以更加 专注于你所关心地方，无论是系列选择、区域缩放还是数值筛选，
（图例开关、数据区域缩放、值域漫游）
让你可以有 不同的方式解读同样的数据。
（动态类型切换，多维度堆积，混搭）

重新定义数据图表的时候到了，浏览ECharts所输出的图表，你不再只是个“读者”，你可以参与其中，这就是ECharts，我们正在打造的一个拥有 互动图形用户界面（GUI）的数据可视化工具。

作为图表的“读者”，ECharts的这些特性可能很吸引。但是否使用？那是图表的“作者”说了算，一个组件库是否能被开发者采纳可能由很多原因，其中比较重要的如是否易用，文档是否完备，是否可维护，是否有社区支持等等。

ECharts目前托管在github，可以看到归属于ecomfe（百度商业前端）下的一个repository，同级的还有很多看起来同样不错的产品（如er，edp，esui等），加之百度前端的技术力量在业界也是有名的，所以是否可维护和得到支持应该可以放心。至于文档，这可能会成为很多国内开发者选择ECharts的原因之一，总体感觉很详细，图文并茂，而且有着丰富的例子可参考，更重要的是全中文啊！
关键的是否易用？ECharts遵循AMD模块化标准，可以使用任何一个符合标准的模块加载器（如seajs，官方自带的是同属ecomfe出品的esl）按需加载ECharts，其目前提供的接口方法实在简单的让人质疑，但好像也想不出还需要啥了，呈现一个图表可以简单的三行代码：
require(['echarts', 'echarts/chart/line'], function(ec){
ec.init(document.getElementById('main')).setOption(option)
});
       当然，一切的秘密都存在于那个option里，里面包含了你所需的各种组件配置以及最重要的是你的数据，ECharts官网提供的例子基本都是当前option的说明，你可以随意改变一下数据或属性然后查看输出，十分方便。可以看出ECharts基本是一个数据驱动的组件库，接口方法很少，但有大量的配置项（当然绝大部分都提供了默认值），你甚至可以动态改变这些配置项去实现你所需的特殊交互，如动态改变地图的宽、高、位置即可实现地图的平移缩放等效果。值得一提的还有这大量的配置项还存在一个多级控制设计（最多三级），这略显复杂的设计可能增加了学习成本同时带来开发中疑惑，但其带来极大的灵活性和配置项叠加效应对于满足高度个性化需求十分有用。
 
       对于一个刚刚起步的的组件库，肯定存在bug和不足，如不少人并不喜欢默认配色方案。但回顾当前ECharts所提供的能力，如拖拽重计算，数据视图，值域漫游，区域缩放和大规模散点等等，很多足具创新的特性着实有点颠覆了传统数据可视化图表的意味，强大而又简单高效的交互能力更是一大亮点，而且基于canvas并且支持IE6的图表组件库并不多见，这一切看上去都并不像是一个刚刚起步的组件库，百度前端的技术力量由此可见一斑，ECharts日后发展如何，是否真能赶超国际水平，让我们拭目以待。
 
       不管如何，既然开源了，各位编程爱好者大可一探究竟，跟百度的前端工程师们切磋交流。
 
参考资料：
1、https://ecomfe.github.com/echarts
2、http://ecomfe.github.io/echarts/doc/slide/whyEcharts.html
3、http://weibo.com/1808084593/zFarDgvyS