整理 | 王强

ApacheCon Asia 2021大会的“数据可视化论坛”上,特斯拉 BI 团队全栈开发工程师孟繁超(Makefile 君)发表了题为“ECharts 的乐趣:我们在特斯拉使用它的经验”的演讲。本文是这次演讲的内容总结。

 

我们把 Dashboard 分为三类,上面这类叫 lowcode dashboard,也就是不需要编程就可以实现的 Dashboard,开发周期大概是一到三天。中间叫 fastly built dashboard,让我们的支持工程师在只会 Python 这种语法友好的语言的情况下,就可以开发出自定义的图表。如果说这种还不能满足我们真正的需求,我们可能就要把它当成一个独立的 APP,用前后端分离的方式进行实现。

引入 Dash

我们做了定义之后发现我们的需求实际上是在中间层,我们需要从中有一些突破,所以我们后来在选型之后发现了这样一个工具,叫做 Dash。Dash 实际上就是一个用 Python 去开发动态化图表的工具,同时它提供了一个非常友好的接口,让我们只知道这些 ID 就可以完成事件的绑定。同时它作为一家商业公司还提供了一个企业版本,但我们主要用的还是它的开源版本,并且因为我们有自己的工程师,就会做一些改造。

 

使用 Dash 的好处就是它是一个纯 Python 开发框架,让我们的很多支持工程师可以相对快速的上手进行自定义报表创建。同时我们可以复用很多 Python 基础包提供的能力,这些包我们可以直接拿来用。另外我们发现图表中有很多不同数据展示的时候,因为我们是同一个数据源,这样用 Python 可以自定义数据源和不同 Dashboard 中间对应的 Chart,可以减轻对于数据库的压力。

 

在这个过程中,我们也把最新版本的 ECharts 引入了,获取了更多图表的整合,并且我们采取的措施没有对它进行过度的封装。我们就直接把 option 传入,只不过在 Python 中要使用的是符合标准的 Json 这样就可以。这样的话我们可以参考 ECharts 官方的惯例进行内部培训,让大家快速上手。

案例展示

以下是我们使用 Dash 以及 ECharts 能做的一些报表。首先是一个结合百度地图的报表。我们有很多物料从不同的地方运到工厂,它会记录这些距离。

上图是 A 股的交易量图表,方便我们简单的选股,后台用了一个叫 TuShare 的库去获取真实数据。

Dash 基础操作讲解

下面是一个用 Dash 和 ECharts 结合的 Gallery 教程,里面有一个完整例子。

 

下面这部分类似于一个 Workshop 的形式。我们会讲一下 Dash 和 ECharts 的基础,提供一两个例子,让大家快速上手。

 

Dash 的使用分为以下四个方面:数据获取、页面布局、图例使用和信号传递。我们把这四个方面都掌握了之后就可以很轻松的上手。

其他的数据是怎么获取呢?你可以使用库里的方法获取数据,或者针对数据库、文件这样的数据用 Pandas。读取文件 CSV 或者 Excel 就更容易了。

 

除了数据获取,我们第二个关注点就是页面布局。Dash 的页面布局并不是那么简单,因为它是纯 Python 来写,我们通过 Dash 里面封装的 HTML 到 div 这样去创建一个 div 对象。

信号传递这部分,我觉得这是 Dash 的一个精髓。它抽象了几个原语,第一个是 output,第二个是 input,还有 state,分别对应它的输出输入以及状态。

这里面要注意的是 Input、State 可以为多个,实际上 Output 也可以为多个,但是大多数情况下都是写一个,因为你默认大多数的函数返回值都是一个的,也就是说 Output 要对应 return 后面的,而 Input 和 State 实际上是按照顺序依次是对应函数的参数。这是使用 Dash 完成它信号传递的方式。完整的代码在这里。

X 轴为 category 类型的时候,我们要把 Data 直接放在这里面,传一些数值或者其他的一些数据。

这里边 Type 要特别注意,我们如果把它设置成一个 Line,它就是一个线状图;如果是设置成 Bar,它就是个柱状图。这是 ECharts 非常强大的一个地方,因为它通过简单的配置就可以在不同的图表之间快速切换。

下面是一个线状堆叠,还有一个线状堆叠的区域。因为这是两个图,数组就有两个。但我们看它的数值是一样的,它应该是重叠的,我们想把它堆叠起来,就是在里面设置一个 Stack。设置 Stack 之后,我们给它同样的一个名称,然后就可以堆叠在一起。这个时候我们如果再加上一个 areaStyle 这样一个参数,它就变成一个在区域覆盖的图。

我们看另外一个稍微复杂的例子。我们在使用 ECharts 的时候也非常看重这一个特性,也就是它能跟一些地图结合。这个例子来自 ECharts 官网,是全国主要城市的空气质量。从数据上来看,我们可以看到它里面有很多的蓝色小圆点,还有绿色大圆点,它是用不同的样式展现出来的。它们都是不同城市 PM2.5 的数据,只不过对于排名前十位的用绿色标注,而其他的都用蓝色。

这里面生成了两类数据,有一个是这些 points 本身,另外就是我们算出来的前十名城市的数据。我们在 ECharts Series 里面放两个数据就可以完成图表的展示。

ECharts 结合百度地图的 Option 配置就是这样,我们重点关注点是在 Bmap 这块。Bmap 要设置默认情况下的缩放尺寸、中心位置以及它的 mapStyle。对于 mapStyle,你可以传入一个大数组进行一个相对复杂的定制,也可以使用它默认的一些模板。

上面这里是我们数据 series 的配置,我们可以看左边是普通的 Points 点,右边是 Top10。Top10 里面加了一些特殊效果。

小结

以上就是我本次分享的所有内容,包括了我们在使用 ECharts 的一些经验的分享,以及两个简单实例的上手,谢谢。

本文文字及图片出自 InfoQ

余下全文(1/3)
分享这篇文章:

请关注我们:

《特斯拉是如何使用 Apache ECharts 的?》有1个想法

  1. admin  这篇文章, 并对这篇文章的反应是俺的神呀赞一个

发表评论

邮箱地址不会被公开。 必填项已用*标注