易小天品Echarts

旁白：上一集（什么，这不是才第一集吗）咱们说到，自canvas推出以来几经更迭，功能逐渐完善，加上flash的没落和现代浏览器的普及，愈来愈多的游戏和可视化应用选择使用canvas来开发。所以诞生了不少相关的框架，各门各种不知凡几，优秀做品更是不在少数。那么在这种环境下，于小跃的xcharts系列做品，功能趋同且残缺，代码混乱，设计糟糕，连造轮子都算不上(离它模仿的echarts相差不能够道理计)，又凭什么从一众优秀做品中脱颖而出，成为后世楷模，人们争相拜读之做呢？xcharts到底是什么，有什么做用？它有什么闪光点？它的做者于小跃又是怎样的人？而于小跃又为何要写xcharts呢？欢迎易小天教授(划掉)作客本期一家讲坛，为你们带来从零打造Echarts系列讲座之xcharts的前世此生。

你们好，我是易小天。

接上回啊，xcharts这样糟糕的的半成品凭什么脱颖而出呢？这须要从当时的环境提及，什么环境啊，canvas框架的发展环境。彼时canvas已经推出多年了，不管游戏引擎仍是可视化图表都有至关成熟且优秀的框架 了，并且还不仅一两个。它们的使用者也是至关得多，能够说当时几乎全部的前端开发者都有耳闻。

可是咱们说，任何一个合格，或者说想要提高本身的开发者，不能只会使用框架对不对？必然要对框架原理甚至源码作深刻了解，才能有所成长。而于小跃就是这样一个想提高本身的人，他以为虽然看了canvas的api，可是怎么能作到echarts这样酷炫，彻底没有头绪，只能徒生艳羡。因此就想了解它的原理和设计。

怎么去了解原理啊？实力强的看源码目录就了然于胸，实力弱的就只能看教程和分析了。实力强的多仍是实力弱的多啊，那显然是弱的多，那时不少人都不能叫程序员，只能叫码农！这个词诸位可能不太了解，是一个比较古老的名词，意思就是，反正就是很弱鸡啦。而于小跃这我的呢，当时……怎么说呢，只能说没有弱到无可救药吧。

他第一反应就是搜啊，百度搜完谷歌搜。面向搜索学习有什么不对吗。诸位就会想了，既然这些框架的群众基础如此普遍，贡献者也这么多，相关分析应该不在少数吧？

于小跃也是这么想的。

至于结果，你们应该都能猜到了，结果寥寥。只能搜到一些如何实现粒子效果，或者介绍某个canvas库和其使用方法的。于小跃当时就蒙了：你一直叫我进步我怎么进步啊，网上为何没有教程啊？

不知道各位有没有这样的疑问，为何没有啊？

旁白：当时的canvas发展可谓百花齐放，而可视化图表领头羊的echarts则是其中佼佼者，做为百度系少有的广受好评的开源做品，其使用和研究者多不胜数，可是于小跃搜遍全网 也找不到好一点的分析教程，和当时其它领域，如mvvm框架vue react分析泛滥的状况大相径庭。这到底是为何呢？这会不会是于小跃写xcharts的缘由呢？

为何没有？于小跃本身总结了三个缘由。

1. 其数理艰涩，教人者疲，而学者无所获。 什么意思呢？就是说这些框架涉及到较多且艰难晦涩（笔者注：对非科班码农而言）的数学知识，也许你本身倒背如流，可是你要写出来让别人也能理解，不是一件简单的事，耗费心神，并且啊，别人看了还不必定懂。

2. canvas，小众也。 和 vue， react等框架比起来， echarts的使用者仍是较少的。或者说整个前端领域，常用 canvas的开发者并很少。偶尔须要用到时，会用框架就好了，不须要多么了解。而就算是使用者，对框架原理感兴趣的也并很少。因此为此写分析的人天然也就少了。

3. 或存，觅而不得。 这什么意思呢？就是说也许是有的，可是他没有搜到而已。为何可能没有搜到呢？这就要介绍一下于小跃这我的了。

于小跃是什么样的人？前面说了，是一个菜鸡。问题是有多菜呢？他在xcharts的序言中写到。

• 余学土木，途中至此。

就是说他原本是学土木工程的，学到一半才转了前端。就是说他是一个非科班的码农。计算机基础很差。固然他说的比较含蓄。虽然他这么说，可是也多是他自谦对不对？非科班不表明能力不行啊。可是他接下来又说了。

• 离家半载，成事不足，虽璞非玉。

这意思是才毕业半年，作成的事情也很少，也就是项目经验少，知道的少又笨。这应该不是自谦了吧。诶，你这个样子还来写分析教程？我告诉诸位，这还不是最过度的，最过度的是什么？\

• 做此文时，探源起始。

哎呀，这不得了啊，他写这个文章的时候，他也才刚刚开始探究原理。就是这么一我的，他写的xcharts。

虽然上面没有明说，可是能够品味出来的一点是，他的英语可能不怎么样。因此，可能有英语的分析教程，可是他搜不到，或者搜到了也看不懂。

那么当时有没有英语的相关分析呢？应该是有的，不过期间过去过久了，很难考证。就此略过不提。

旁白：易小天教授为咱们分析了于小跃找不到相关教程的缘由，同时介绍了于小跃在当时的状况。虽然缘由找到了，可是如何解决呢？做为一个弱鸡，在没有教程的状况下，他如何去探源呢？

虽然找不到相关分析，但仍是得看不是，不能就此停住学习的脚步啊。可是前面也说了，于小跃是个菜鸡啊，本身去看源码？诶，没错，就是本身看。各位就会想了，他看得懂吗？

他勉强能看懂。这和以前提到的vue有关系。前面也说了，vue源码相关的分析是不少的，于小跃呢，刚好看过一些，本身也完整阅读过vue的源码，还写了笔记。你们有兴趣的能够去了解一下。

虽然两者源码不一样，可是于小跃有过阅读源码的经验了，应该说也具有一些从高度解耦的代码中抽丝剥茧并组合的能力了，因此，他磕磕绊绊，仍是能看懂echarts的源码的。

有的人可能就有疑问了，他看就看呗，这和xcharts有什么关系呢？他的笔记也应该叫echarts阅读笔记啊。没错，通常来讲是这样，看源码，写分析笔记，很常见的流程。

可是于小跃这我的呢，懒。要他讲解echarts源码的话，首先本身的理解不必定对，其次那么多东西如何作取舍，常言道，去取之历来，他本身也不知道如何而来。因此他想到了另外一个方式，本身实现一遍echarts。既能帮助本身深刻理解，也能造福大众。

这也是xcharts和其它库的不一样，它们的目的和受众人群彻底不一样，能够说xcharts是为了于小跃本身这样的人量身打造的，而这样的人应该说并不在少数。因此，它才能脱颖而出。

这，就是xcharts的由来。

旁白：本集中易小天教授为咱们讲述了于小跃的状况和他所著xcharts诞生的由来，并简要分析了xcharts的特色。那么于小跃将会从何处着手，又以怎样的方式来建立xcharts，并作到通俗易懂，让和他本身同样水平的读者理解呢？欢迎收看下集，从零打造Echarts系列讲座之从再造Zrender开始。哦不对，是canvas破苍穹。

注：以上用词若有不当，皆为节目效果，还请一笑而过。 本系列只是趣味引入，真正的知识点请看正文。