🎉 echarts-for-react v3 發佈

echarts 是什麼，不用多說了， 國內最知名的可視化圖表庫之一。 echarts-for-react 是它的一個極簡的 React 封裝。

1、前言

🎉 echarts v5 發佈以後，echarts-for-react 上已經有不少不少的 issue 請求支持最新版本，因此，過年期間升級了 v3 版本，支持了最新的 echarts v5。

很尷尬，目前我是在螞蟻，主要作大數據 BI 產品 + AntV 數據可視化技術棧。理論上來講，echarts 使咱們的競品，哈哈，然而，我竟然還在過年給它升級周邊，我想這應該就是開源精神吧。那就順便一塊兒打個廣告吧，歡迎你們支持我如今的工做。

• G2：基於圖形語法的數據可視化，提供靈活性、定製性
• G2Plot：基於 G2 作的一圖已封裝，下降大部分簡單場景的使用成本
• Charts：基於 G2Plot，在 Ant Design 上透出的 React 圖表組件庫

本文仍是重點軟一下 echarts 和它的 react 封裝吧！

2、起源

在螞蟻以前，本身在網易遊戲入坑前端，當時內部使用 SVG 作代碼版本控制，因此本身作了一個相似於 travis（可是沒有 GitHub Action） 的面向 SVG 的 ci 工具。這個項目是我初次上手 React（0.14.x 版本）。

然而在 JQuery 技術棧下， echarts 很好用，而在 React 下，竟然沒有一個開箱即用的庫，因此每次都要本身在 React 的環境找到 DOM，而後調用 echarts.init，很是 low，且代碼重複率很高很高，因此在項目中作了一個 React 封裝，而後就開源出來了。

畢業以前，在學校作 Java 的，幹過 Java 的知道，Java 的包名不少都會去 4j 後綴，意思是 xx for java。因此由於慣性，給他取名爲 echarts-for-react。

3、定位

和我本身作開源包皮的習慣和原則有關：

1. 封裝就要有本身的明肯定位，不要過分封裝
2. 透傳概念，不新增數據結構和技術概念
3. 符合技術棧的習慣（按照 React 的使用性質，按需增長一些開發優化的內容）

因此這個包，主要的內容和特性包括：

1. className + style 屬性

React 組件本質仍是 ui 組件，個人意識中，每個 React 組件應該有 className 和 style 屬性，爲其作樣式的自定義。

2. echarts.init 參數做爲頂層 props

頂層 API 參數做爲頂層 props，概念層級對等，開發者易於理解。這些包含有：

1. notMerge
2. showLoading
3. loadingOption
4. opts.renderer
5. ...

3. echarts option 徹底透傳

echarts 使用 option 方式來構件圖表，結果完善的文檔、豐富的官網 DEMO，讓開發者開發一個圖形很是容易，幾乎直接 copy 便可。

因此 echarts-for-react 對於 option 也是徹底透傳，不作任何修改，甚至都沒有默認值的處理，達到的就是官網代碼中的 option copy 到這裏同樣可用。

這大大下降了我本身的維護成本，也下降了開發者同窗的調試成本。「react 報錯了，先去 echarts 官網試試看，官網上能夠，這邊必定能夠！」

4. 按需決定 update 仍是 new？

針對頂層 props，仍是 option 變化，包內決定是否新建實例，仍是在舊實例上進行更新。讓開發者只須要關注在 props，它包裏處理好不一樣 props 要作不一樣操做。

5. 自動適配容器大小

這個特性能夠說是這個 200 行代碼的封裝庫中，最核心的特性，圖表自動根據容器的大小作 resize。爲了這個功能， 我還特地增長了一個模塊 size-sensor（爲何不用開源？以前用的開源各類問題，拖延不解決，因此本身實現一個簡單一些的。）

自動適配容器大小，在目前 low-code、搭建產品中，很是很是必須，幾乎能夠說是必備功能。這一點在目前我負責的 G二、G2Plot 中一樣有大量 issue。

6. 按需加載

echarts 包自己仍是很大的，混淆後接近 1M。因此按需加載是 echarts 的一個特性，本模塊也經過一些代碼架構，分拆除 core，讓開發者決定如何進行分包和按需引入。

4、升級

給本身立的 Flag，過年期間完成就得完成。

本次升級主要的內容在於：

1. 徹底 typescript

以前是在 React 0.14 時代，仍是使用 props-types 校驗 props，而後 ts 類型定義單獨本身手寫，也很是痛苦。因此此次直接使用 ts 寫，自動生成 類型定義 文件。

固然主要緣由，仍是由於來螞蟻以後，基本都寫 ts 了，真香。
**

2. 單測覆蓋率

以前使用 jest-canvas-mock 進行單元測試，畢竟是 mock 而不是真實運營，全部一些邏輯測試不到，覆蓋率一直提不上去。

因此此次換成了 jest-electron，真實運行，覆蓋率直接提高到 ，運行也改爲使用 GitHub action 了。固然 jest-electron 這個模塊，也是爲了給 AntV 系列技術棧作單測，而開發的輪子，我的以爲仍是挺好用的。

然而，前者的下載量都 2M 每個月了，後者才 4K。

3. 全新官網

以前的官網是本身初學 React 的時候，徹底本身搭建的，沒有 lint、ci，代碼凌亂，樣式也很差看。因此此次直接使用 dumi 這個庫自動生成，網站所有 markdown 開發，也方便你們遇到官網 typo，直接一鍵提交 PR。

同時 Example 實例也可直接一鍵導航到其餘代碼編輯工具上。

然而，以前還能夠官網放一些 google adsense，如今 dumi 上，不知道怎麼加一個自定義的谷歌廣告組件上去，慢慢在弄吧！

4. README 排版

項目很簡單，概念也很簡單，因此直接 Readme 做爲 document，可是以前的文檔結構、樣式排版比較凌亂，因此按照如今的我的審美，從新寫了寫！

5、最後

從以前用 echarts，到如今作 AntV 和大數據產品，本身也算是一直在可視化這個領域了，目前 AntV G2 有不少的規劃和內容，須要一些對可視化有興趣的同窗加入。若是對如下有興趣，能夠聯繫我投簡歷（個人 GitHub 主頁有微信號）：

• 大數據、數據分析
• 可視化搭建、Low Code
• 數據可視化技術

歡迎你的加入，咱們一塊兒來幹 AntV G2 的 5.0 版本！