共计 3563 个字符，预计需要花费 9 分钟才能阅读完成。
除了 Apache ECharts 5 系列教程（3）交互能力之外，咱们也非常重视开发者的体验。
咱们心愿 Apache ECharts 默认足够弱小好用，让开发者无需为数据处理等问题分心，更高效地专一在用图表讲故事这件事上。于是，咱们在 Apache ECharts 5 中，用 TypeScript 重构了整个我的项目，帮忙我的项目的维护者以及应用的开发者在开发过程中更容易尽早发现类型谬误。另一方面，这也升高了我的项目保护的门槛，改善了开发保护的效率。咱们心愿借助这次重构，可能吸引更多的开发者成为 Apache ECharts 的维护者。接下来就让咱们具体介绍 ECharts 5 在改善开发者体验方面做了哪些改良。
开发体验
数据集
数据转换，也就是 data transform，是 ECharts 5 新反对的 API 和配置项汇合。
其目标是，把常见的数据转换解决的逻辑，内置实现或者由第三方插件提供，开发者能够用对立的申明形式，来应用这些性能。
那么咱们先来看一个例子：
最左侧是原始数据，是一个二维表，每一行是一个数据项，比方每一行示意，1800 年 澳大利亚的人均收入、寿命、人口是多少，1800 年 加拿大的人均收入、寿命、人口是多少，1810 年 澳大利亚的这些数据是多少，等等……
对这样的数据进行可视化的时候，咱们常常并不会用上所有数据，比方能够去掉晚期不精确的数据，也可能须要先对数据进行肯定的计算再绘图，比方依照国家进行聚合，失去最大最小值、均值、分位点等。图中举的例子，先对数据进行了过滤，只取 1950 年后的数据，而后按国家进行聚合，算出人均收入的最大最小值、分位点，最初进行排序。这所有做完后，才绘图，绘制出盒须图，以察看不同国家，在 1950 年后的，支出情况。
数据转换，也就是 data-transform 这节，关注的就是，数据处理的过程，怎么实现，怎么应用。
事实上，之前咱们往往会须要本人写数据处理代码实现上述这些数据转换，本人解决原始数据，再输出到 ECharts 中，如上图左侧的灰色局部。尽管本人写的解决代码各异，然而不少解决逻辑是类同的，比方，过滤、排序、聚合等等。
ECharts 5 试图把这里一些罕用的解决逻辑，内置实现或者由第三方插件模式实现，防止了开发者反复做这些工作，如上图右侧的橙色局部。并且提供了对立的申明式配置形式。
最开始提及的例子，用数据转换来实现，会如右边这样的配置。ECharts 5 里，数据转换器，配置在数据集（也就是 dataset）中。如图示例中，dataset 里最下面一项，是原始数据。
接下来就是数据转换器的配置，其中首先应用 echarsts 内置的 filter transformer，筛选出 1950 年后的数据，而后应用一个第三方的 aggregate transformer，能计算出每个国家这些年的中位数，分位点，最大值，最小值，最初排一下序。
而后，就能够配置系列，基于数据转换的后果，画出图表。咱们看到的例子，应用的是盒须图，也就是 boxplot 绘制数据，它间接表白了每个国家的分位点，最大最小值。当然咱们也能够应用其余类型的图表来进行绘制，比方用柱状图绘制最大值。
并且，以申明式形式配置数据变换后，对于剖析数据，也带来了肯定水平的方便性。
如这个动图所示，在左侧批改数据转换器的参数配置、以及系列的参数配置，右侧能失去相应的计算结果。
为了不让内置代码变得过于宏大，咱们只内置了过滤、排序等几个最罕用的数据转换器，而后通过插件模式提供更多统计的转换性能。这些大家都能够在 ECharts-stat 中获取。ECharts-stat 中提供了拟合回归线，简略聚类等等数据转换器，他们能够注册进 ECharts。
这里是一个直方图的例子。应用了散点图，绘制原始数据。数据转换器生成的直方图，用两组柱状图绘制。
这是一个回归线的例子。应用了散点图，绘制原始数据。而数据转换器生成的回归线，由另一个折线图系列绘制。
这是一个简略聚类的例子，应用了 visualMap 组件，来生成不同集蔟的色彩。
国际化
从 ECharts 开源以来 GitHub 上能找到的最早的国际化相干 issue 是在 2014 年提出的。长久以来，社区内确实有很强烈的需要。不齐全统计，国际化相干的 issue 有不下 20 个。需要强烈和历史悠久促使咱们开始了降级 ECharts 原有的国际化计划，采纳的是依据不同的语言参数打包出不同的部署文件的模式。
从上图能够看到，对于反对的语言，最终会生成多个 echerts 部署文件。这种形式，使动静的语言和动态的代码包绑定在一起。应用的时候只能通过从新加载不同语言版本的 ECharts 代码来达到切换语言的目标，不太不便。老版本的实现里为了切换语言，要从新加载不同语言的 ECharts 包。
而在 EChart5 里，动静的语言包和动态的代码包拆散开来。切换语言的时候，只须要加载相应语言包。通过相似挂载 theme 的形式，应用 registerLocale 函数挂载语言包对象，从新初始化后就实现了语言的切换。同时，为了简化敲一次命令生成一个指定语言的包的繁琐操作，ECharts5 中的语言包是主动打包生成的。你也能够通过 build:i18n 命令，手动一次性生成所有语言包。
另外，打包生成的每种语言包都会生成相似上图的两个语言包 其中，lang 包是一个蕴含了 registerLocale 函数的供间接加载应用的包。应用时，只须要间接加载即可，无需再手动注册。而 lang-obj 包提供了纯语言包对象，供用户灵便革新并自行注册。以后除了默认反对的英文和简体中文以外 也感激社区的同学奉献的法语，泰语，芬兰语，西班牙语，日语，等语言包。
也欢送大家奉献，持续丰盛咱们的国际化语言包，使 ECharts 成为全球化的组件库！
TypeScript 重构
ECharts 5 所做的第一个工作是，把整个的代码库，从 JS 改成了 TS。
这件事件是个比拟重大的变动，因而，在开始之前，针对于“是否要迁徙成 TS”，有过强烈的争执。
过后的次要顾虑是，代码库在 JS 状态下，能多年保护，阐明这种模式可行，而当初还有很多别的事件要做，迁徙所须要的老本不小，带来的益处却不确定。保守派的观点，源于其认知中，对生产工具重要水平的排序绝对偏低。然而从后果来看，生产工具的改良，对整个我的项目的倒退，作用很大。咱们待会儿来具体阐明。
另外，争执的产生，也因为此类事件，过后不容易有很多定量论据，而主观判断的说服力有余。因而争执过程中，先用 zrender 尝试迁徙了 TS，定量地失去了工作量预计、工夫预计的教训，以及可能大抵判断出 ts 对于咱们我的项目的优劣。这样证实了迁徙有可行性的且危险可控。于是，接下来开展了 ECharts 的迁徙工作。
咱们来看一看，ts 对于 ECharts 带来的益处。
首先，ECharts 有越来越多的社区代码奉献，而非像最初始一样，依附着几个头脑中知悉代码全副细节保护人。那么，可读性就变得尤其重要。ts 提供了形式化的办法来形容参数、属性的类型，尤其是大量的自定义业务类型。这些形容可被工具查看，可被 IDE 动态剖析，于是看代码时，这些信息就不再须要到处挖掘，记忆在脑中。
有了动态类型查看后，ECharts 5 对一些代码构造的重构有了质量保证。ECharts 性能庞杂，是个不小的我的项目了。重构时须要保障逻辑等价，如果没有类型查看，这所带来的心智累赘十分大，脑中须要记住的类型信息十分多，出错的概率大大增加。因为 ECharts 性能繁多，有些暗藏的性能和设定，如果批改出了 bug，因为开源我的项目的不及时性，失去反馈再修复的周期可能绝对比拟长。然而类型查看能防止掉不少这类的 bug，是开源我的项目质量保证的重要工具。
此外，类型查看也升高了 code review 的心智累赘，能更快得浏览代码、走查代码。
最初，开发体验天然会有很大的晋升，这是 TS 的自身特点。
ECharts 迁徙 TS 的次要工作，是集中一个时间段实现的。如果边迁徙边进行其余的开发或重构，则不易保障逻辑的等价性，如果产生问题，很不易查出来。
迁徙的具体执行，首先是所有文件都改成 .ts 后缀，并且标注为 ts-nocheck。而后逐渐每个文件加上类型，去掉 ts-nocheck。
对于 ECharts 的使用者来说，类型的严格水平和正确性比之前更高了。
对于 ECharts 的维护者来说，咱们给数百 option 都赋予了类型，从而，这些配置项相干的操作代码，都能失去类型查看，判断是否呈现笔误。工具函数、基类等等基础设施的类型，也进行了精心的设计，比拟留神应用 泛型重载等等 ts 个性，以便下层有更精确的类型推导。此外，咱们也不再须要独自保护 d.ts 文件，开发者所需的 d.ts 间接能够构建产生。
其余
以上就是 ECharts 5 在开发者体验方面的晋升，在下一篇文章中，咱们会介绍 ECharts 在无障碍拜访方面的致力。