大屏图表，ECharts 从“熟练”到入门

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

📖阅读本文，你将

1.了解 配置驱动 的思想
2.理解 Echarts 基本概念
3.了解 graphic 和 动画基本玩法。
4.了解 Echarts 基底组件的封装的思路

一、不是标题党！Echarts，简历上人均 “熟练”？

公司最近在招外包，而因为目前大屏的需求比较多，所以我就稍微关注了一下候选人们简历上对于 Echarts 的熟悉程度。

不看不知道，一看下一跳，Echarts 属实已经是业内人均 “熟练” 的基本技能了。

以上是短短几篇简历中摘选的自我描述，可以看出，Echarts 在大众研发的心中，已经是和 Antd、ElementUI、Bootstrap 相当的常用第三方库了。

所以，我就开始在面试中加入了关于 Echarts 使用的相关问题，想看看 熟练 到底是什么意思。

但是一轮问题问下来，大家好像又对它很陌生。

难道，所谓 熟练，就是能在社区里找到 Demo，然后把配置项 Copy 到项目之中？

问：“现在你找到 Demo 了，但是 Demo 没有显示图例（也就是那些彩色小方块小圆圈，表示各类数据颜色的东西），你应该查文档的什么关键词？”

答：“一时说不出来，但我肯定能试出来…”

问：“我想把UI出的一张图片放在饼图的背面，作为背景，应该怎么弄？”

答：“先去社区找找 Demo 吧…”

问：“这种 Demo 可能不太好找吧…而且有些场景，Demo 涉及的也不多，比如需要在某个特定位置放一些字，做一些动画，应该怎么办？”

答：……

虽然我的习惯和大家是一样的，遇到需求，先去社区里找一个相似度最高的 Demo 再说，但是开发大屏，怎么可能不遇到 “特异化、定制化” 的诉求呢？

当 Demo 帮不了你的时候，你是否可以熟练地通过文档，找到合适的解决之道呢？

如果 找DEMO 就是 熟练，那我建议咱还是先忘记 “万事求DEMO” 的这种熟练方式，重头捋一捋 Echarts 这个框架，先力求 入门 。

这就是标题所谓的，从 熟练 到 入门 的意思。

二、大屏图表，为什么我选 Echarts?

在问出这个问题之前，我觉得还是先问一问：为什么不选Echarts 呢？

大屏的本质是什么？是讲故事，是给客户 量身定做 的讲故事！因此，大屏需求，更多的情况就是 做项目，而不是 做产品。

做项目，什么最重要？

六个字：成本低、效率高。

老板：你说复用、优雅？我都觉得好笑。

• 成本低软件项目最大的成本，就是人的成本，现在哪怕是培训班刚出来的小萌新，哪怕他压根不知道 g2plot 是什么，但简历上大概率会写上 熟练使用 Echarts。如果招到那种五六年的前端老兵，那 Echarts 的 API 熟练度只会更高。花更低的钱，能招来直接做项目的人，这就是成本低。* 效率高为什么 Echarts 效率更高，因为它的社区实在太成熟，各种样式风格 Demo 的沉淀实在太多。 比如：早期的 Echarts gallery (已被关闭)、又比如：www.isqqw.com/在这些社区里，你可以快速找到各类你想要的风格和实现，从而低成本改造成 UI 想要的样子。Echarts 通常被拿来和 AntV 进行横向对比，关于孰优孰劣，某乎上的争论也比较大，但大家似乎都能达成一种共识：