BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

开源JavaScript数据可视化图表库ECharts 1.1.0版本发布,开发者介绍实现思路

| 作者 杨赛 关注 3 他的粉丝 发布于 2013年7月25日. 估计阅读时间: 5 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

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团队认为,接口设计的合理比起实现成本重要得多。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

很好,又重新发明了一次 highcharts by wen bob

highcharts 用户笑而不语,API参数都好面熟啊

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

百度, 你能不能不要那么腾讯? by 曾 国泰

HighChart用户淡定地路过....
还有,那地图跟GoogleCharts的Geo Charts相比,还真是弱爆了!

作为国内互联网公司的领头羊,百度, 你能不能不要那么腾讯?

回复功能有bug,还是交互太烂? by 曾 国泰

我只不过轻轻地点击"发送信息",那小伙伴一点反应都没有(好歹也搞个hover样式嘛),于是我又点击了一次,结果还是没响应..再点击(重复N次)...结果,齐刷刷地回复啊...亲,我真不是故意刷屏的....

Re: 百度, 你能不能不要那么腾讯? by 林 峰

谢谢关注~
Highcharts作为这个领域的标杆产品,有很多我们可以学习的地方,也是我们追赶的目标~

我们才刚刚起步,跟Geo Charts相比肯定弱爆了,但google不会为china定制,而我们会,也欢迎了解一下我们的值域漫游功能。

诚挚邀请你耐心阅读这份文档 ecomfe.github.io/echarts/doc/slide/whyEcharts.h...
或许你就有不同的想法,我们没有以领头羊自居,只是个刚刚进入这个领域的新人,但有一点不同意的是,我们的团队不腾讯,看看我们列举创新特色有哪个产品实现了?

Re: 很好,又重新发明了一次 highcharts by 林 峰

谢谢关注,参考上一个回复?:)

肯定其开源的贡献,但是不得不说和Highchart 很类似 by Septem Patrick

希望能开源更多更有意义的东西

Re: 百度, 你能不能不要那么腾讯? by Septem Patrick

看完林峰提供的ppt, ECharts的拖拽重计算和数据编辑功能还是蛮有亮点的, 另外从license上考虑, 确实也很不错, 是个不错的选择,希望大家抛弃偏见,肯定其贡献

不错,多了一种选择。 by qiu zhanghua

希望增加仪表组件,这个似乎不是太复杂。

Re: 百度, 你能不能不要那么腾讯? by Chen Atom

can not agree more :)

又多了一种选择 by Guo Yongtao

看到很多人喷百度,其实开源出来了,就是一种贡献,对于当前众多的图表工具,不是多了一种选择吗?好事

Re: 百度, 你能不能不要那么腾讯? by 王 成义

看了,这个ppt,感觉不错啊。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

23 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT