【独家】ECharts 2.0发布,大量细节曝光

简介:

0


引言

ECharts,缩写来自Enterprise Charts,商业级数据图表,开源来自百度商业前端数据可视化团队。虽然业界已经有很多同类的软件,但ECharts带着颠覆性的功能设计和技术特征出现后迅速成为国内数据可视化领域的后起之秀。

2013年6月发布1.0以来ECharts已经release了14个版本,版本间的时间跨度最长没超过5周,但距离ECharts上一个版本已经过去两个多月了,就在今天,ECharts 2.0(下文简称E2)正式对外发布,这是ECharts面世以来时间跨度最长也是最大的一个版本升级。大数据文摘独家邀请到团队负责人,ECharts作者林峰(微博:http://weibo.com/kenerlinfeng)为大家讲述,在过去的这两个多月里他们团队究竟做了些什么?

大家好,我是林峰,感谢大数据文摘的邀请,很高兴在今天这个对我们来说非常特别的日子,能跟大家聊聊在过去的这两个多月里,我们做了什么。

一次自我燃烧的涅磐,重构

给正在高速运行的汽车换轮胎并不是件容易的事情。ECharts发展势头很好,但我们却在这时候启动了一次全面的重构,从底层的ZRender到整个ECharts,从代码细节,封装继承优化到模块划分,依赖关系的梳理,近5万行代码几乎80%有过或大或小的改动。优化是无止境的追求,这是一次自燃式的重构,我们花了1个多月就做了这件事情。做完后的ECharts没有任何新增feature,但我们收获了3+倍的性能提升,内存消耗的明显下降,这在多图表和大数据的场景下会有更大收益。

0

一个不可能的任务,过渡

如果用过基于d3实现的图表,你一定会喜欢他在状态间切换的自然过渡,这是我们一直想实现的feature。基于d3,准确来说是基于svg实现动画过渡是一件容易的事情,svg本身就是一个有状态的dom实体,你只需要告诉浏览器目标状态是什么,在css3的帮助下,浏览器会自动帮你完成状态过渡的动画。所以你会看到很多基于svg的图表从一开始就有这个feature。而在Canvas这个栅格图像环境中,浏览器只把他当图片处理,任何一个像素的变化,都得需要我们用程序去控制,而且Canvas本身是无状态的,可以夸张的理解为给你两张图片,你需要找到其中有哪些实体发生了变化,并且还得为这些变化加上带缓动效果(常见的如渐进渐出)的过渡动画。这看上去似乎是一个不可能的任务!但我们真的实现了,这里很想展开一千字来说,但今天这个环境可能并适合,下次吧。E2支持了状态过渡动画,并且支持31中缓动效果。

0

一次能力依赖的反省,大数据

ECharts基于Canvas,Canvas的渲染能力比svg高出多个数量级,特别是在大量图形元素同时渲染的时候这个优势会更加明显。我们一度依赖甚至说过度依赖这种能力,当我们看到ECharts轻松渲染出5万数据的时候,我们十分高兴,因为这已经是很多图表的极限了。但是,当数据量继续往上增长,10万、20万,100万的时候,虽然能够出图,但瓶颈显然已经出现了,性能问题埋在那些粗放的渲染方式和一些低效的代码逻辑里。这是一次能力依赖的反省,我们需要直面这个问题,别把跑车开成了拖拉机,通过力导向布局找寻系统中的核心模块,利用chrome开发工具寻找耗时所在等等的手段,我们最终不仅只有大规模散点图了,我们让直角系下所有图表都支持了大规模数据渲染模式,包括使用落后的IE8-浏览器,E2的性能在现代浏览器上已经达到20万数据秒级成图。

0

一个更高的抽象,异变图表

ECharts的数据图形个性化能力很强,这是其自身出现就是为了通用支持公司内复杂繁多的业务线需求而设计的。但跳出常规的业务需求,在更广的使用场景里我们发现我们还需要图表级的个性化能力,我把他称为图表的异变能力,常见的散点图上点间连线,这就异变为不等距折线图了,反过来也是通的,这是一种更高的抽象。E2里做了地图的升级,除了已经支持标准geojson格式的任意地图类型扩展,我们还支持svg格式的异变地图类型,这种文件格式随处可见也更容易生成导出,ECharts地图的所有能力,值域漫游,标注标线,炫光特效等等你都可以应用到基于这份svg的异变地图上,轻松实现如室内空间,解剖,设备爆炸图,运动赛场等等的空间数据分析。当然,你甚至可以配合E2新增的时间轴组件做时空数据分析了,如果你听说过有一款叫Gapminder的软件,那我很高兴的告诉你,基于E2你可以轻松搭建出不仅局限于气泡图的类Gapminder系统了。E2的地图是我们做异变图表的一个尝试也是一个起点,相信更多图表级的个性化能力会陆续在ECharts里出现。

0

一项商业友好的遵循,BI图表

从ECharts1.0起就不断的有仪表盘的需求反馈,但我一直没做,主要的原因是我觉得仪表盘太简单了,而且从数据可视化的角度来说,仪表盘的表现效率太低了,那么多图形元素仅仅传递一个数据。这得感谢北京的交通环境,在一次漫长的拥堵当中我有机会观察和思考仪表盘的问题,我突然间意识到仪表盘不仅是在传达数据,它能传达出一种易于记忆的状态,并且影响你的情绪,这种正面或负面的情绪影响对决策运营是有帮助的,所以在E2里我们新增了仪表盘,漏斗图这类常用的商业BI类图表,这是一项商业友好的遵循,我们十分欢迎各个领域的朋友们给我们提需求,批评和建议。

0

就说这些吧,ECharts Dev-2.0分支开出去后大大小小提交近300次commits,这还没包括底层ZRender的统计,其中功能细节的优化点就多达100多处,change log已经写不下了(好吧,是我懒),但其实,对我们来说做过了什么已经不重要了。

感谢一路走来关注、帮助我们的亲人、朋友,感谢信赖ECharts的团队和企业,感谢一路有你。刚才说了,今天对我们团队来说是一个特别的日子,2013年6月30日,ECharts 1.0正式对外发布,而1年后的今天,在这个周年纪念日ECharts 2.0出现了,这是我们新的起点…..

ECharts官网:http://echarts.baidu.com/

ECharts官微:http://weibo.com/echarts




原文发布时间为:2014-06-30

本文来自云栖社区合作伙伴“大数据文摘”,了解相关信息可以关注“BigDataDigest”微信公众号

相关实践学习
简单用户画像分析
本场景主要介绍基于海量日志数据进行简单用户画像分析为背景,如何通过使用DataWorks完成数据采集 、加工数据、配置数据质量监控和数据可视化展现等任务。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps 
相关文章
|
9月前
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
133 1
|
9月前
|
API
Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图
Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图
103 0
|
9月前
Echarts实战案例代码(35):股票智能跟踪分析系统
Echarts实战案例代码(35):股票智能跟踪分析系统
78 0
|
6月前
|
索引
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
73 0
|
8月前
|
JavaScript 前端开发 数据可视化
Vue 引入高德地图:实现地图展示与交互
本文将介绍如何在Vue项目中引入高德地图,以及如何实现地图的展示和交互功能。我们将从安装依赖开始,然后配置高德地图的密钥和相关插件,最后演示如何在Vue组件中使用地图组件和实现基本的交互功能。通过本文的指导,您将能够轻松地在Vue项目中集成高德地图,实现地图的展示与交互。
397 1
|
9月前
|
前端开发
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
102 0
|
9月前
|
小程序 定位技术
记录一款基于地图标注点展示的微信小程序开发过程纪要
记录整理一款基于地图的微信小程序开发过程,主要涉及标注点展示,可视范围内标注点动态更新,标注点自定义气泡,气泡点击及气泡内容实时更新
100 0
|
9月前
|
JSON 前端开发 数据可视化
Echarts实战案例代码(4):地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案
Echarts实战案例代码(4):地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案
238 0
|
9月前
|
数据采集 监控 数据可视化
做出酷炫的动态统计图表,不一定要写代码
首先这个名字很长的,就是上面 GDP 图表的作者 Jannchie见齐 基于 D3.js 开发的 将历史数据排名转化为动态柱状图图表 的项目,并在 github 上开源了。
|
9月前
|
监控 搜索推荐 数据可视化
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
漏刻有时垃圾分类回收数据可视化大屏监控源代码百度地图标注及地图个性化处理方案
64 0