易小天品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破蒼穹。

注：以上用詞若有不當，皆爲節目效果，還請一笑而過。 本系列只是趣味引入，真正的知識點請看正文。