特斯拉是如何使用 Apache ECharts 的？

| 2021-08-25

整理 | 王强

在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 的数据，只不过对于排名前十位的用绿色标注，而其他的都用蓝色。