數據可視化 --- eCharts 框架原理

1、ECharts 是一個輕量級的 javascript 圖形庫，純 js 實現，MVC 封裝，數據驅動。
2、Svg 和 Canvas 是兩個可以選擇的類庫之一，其中 svg 交互性更好，性能較弱，不適用於移動端，在繪制數萬個點時會崩潰。而 canvas 的渲染速度和性能更好，echarts 在 canvas 上構建一層 MVC層，使得它可以像 svg 一樣交互。
3、ECharts 的特點：重要性和優先級依次遞減，設計效果直觀、生動，能夠交互，可個性化定制。
4、ECharts 總體結構是基於 MVC 架構的，各部分的主要作用是：
Storage(M)：模型層，實現圖形數據的CURD（增刪改查）管理；
Painter(V)：  視圖層，實現canvas 元素的生命周期管理，即：視圖渲染、更新控制、繪圖；
Handler(C)：控制層，事件交互處理，實現完整的dom事件模擬封裝。

Storage 是一個類似數據的倉庫，提供各種數據的讀、寫、改、刪等操作。Painter 持有 Storage 對象，即：Painter 讀取 Storage 進行繪圖。Handler持有了Storage 對象和 Painter 對象，控制層對模型層有CURD關系，即：Handler 通過訪問 Storage 對象提供的數據增刪改查操作，實現事件交互處理所需的數據部分；控制層與視圖層存在 call 關系，即：Handler 通過訪問 Painter 對象提供的視圖操作，實現事件交互處理的視圖部分。