ECharts 是一款开源的、基于 web 的、跨平台的支持快速创建交互式可视化的框架,它易于使用、拥有丰富的内置交互以及高性能。ECharts 通过一套声明式的可视设计语言定制内置的图表类型,并且底层的流式架构和高性能的图形渲染器极大地提高了 ECharts 的扩展性和性能。
VI 2018 第二期,提前录取了一篇由百度 ECharts 团队和浙大 CAD&CG 重点实验室合作的研究文章 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization(作者:李德清、梅鸿辉、沈毅、宿爽、张雯莉、王俊婷、祖明、陈为)。背景:由于缺乏编程能力的用户在进行可视化分析和设计时想要快速地创建基于 web 的可视化作品仍然会遇到诸多困难,而现有的可视化设计系统和编程工具库并不能很好地解决这一问题。本文介绍了一种开源的、基于 web 的、跨平台的支持快速创建交互式可视化的框架 ECharts,它易于使用,拥有丰富的内置交互和高性能。结果表明:通过比较 ECharts 与 C3.js, HighCharts, Chart.js 的实用性和性能,实验结果表明了该框架的有效性和可伸缩性。
部分内置图表
ECharts 架构设计
ECharts 的二维和三维可视化,除了底层的渲染引擎不同以外,上层的架构和工作流都是一致的。简单的架构如下图,主要包括了一个 ZRender 层和 ECharts层,ZRender 层的主要作用是,隔离底层的渲染引擎、对渲染引擎支持的基本绘制元素和绘制特性进行了封装、以及基本的用户交互(如 mouse event)和图形动画等的封装。
ECharts 层则包含了具体的可视化视图、组件、各个视图对应的交互、以及外部程序可调用的接口。这里的可视化视图是指,折线图和散点图等具体的可视化表现形式;组件是指,坐标系和提示框等协助视图绘制和呈现数据信息的工具;视图的交互是指,各个视图上特定的交互,如柱状图的上钻和下钻;对外的接口主要用于外部程序控制 ECharts 程序的渲染绘制和交互等。ECharts 内部各个视图、组件之间是相互独立的,可以任意地组合在一起,便于扩展和维护。
详细的架构
渐进式渲染
ECharts 影响力
ECharts 在国内工业界影响巨大。目前在 GitHub 上位列可视化板块第二,截至发稿拥 27762 个 star 数。在国内拥有近 8k 的日百度指数,350k 的官网日PV,以及每周 9w 左右的活跃用户,是目前国内最热门的可视化工具。不仅为百度内部近 90% 的产品线提供可视化支持,还被外交部、国家统计局、国家专利局、华为、联想、阿里、腾讯、京东、小米、今日头条等外部机构所广泛使用。通过不完全统计,目前占有国内 70% 的市场份额。
论文原文链接:https://www.sciencedirect.com/science/article/pii/S2468502X18300068
Visual Informatics(中文名《可视信息学》)是由浙江大学主办、浙江大学出版社和Elsevier出版集团联合出版、在线发行、开放获取的国际学术期刊。该刊聚焦于面向人类感知的视觉信息的建模、分析、合成、增强与自然交互。主编是周昆教授、Hans-Peter Seidel教授。