eCharts總體架構(gòu)：
eCharts的底層庫 Zrender，用面向?qū)ο蟮姆绞桨褜嶓w抽象成為圖形元素芹扭，調(diào)用 Canvas API設(shè)置樣式问拘，然后構(gòu)建路徑，進行圖形元素渲染压鉴。
M - 數(shù)據(jù)管理層（storage）崖咨，負責存儲元素，進行增刪改查晴弃。
C – 控制層（handle）掩幢，負責事件處理逊拍，重要是是監(jiān)聽事件的作用坐標上鞠。
V – 視圖層（painter），負責繪圖操作芯丧，canvas元素生命周期管理芍阎，視圖渲染，更新控制缨恒。
eCharts前端初始化流程：
1谴咸、為eCharts準備一個具備大小（寬高）的Dom
? ? ? <div id="main" style="width: 600px;height:400px;"></div>
2骗露、基于準備好的dom岭佳，初始化echarts實例
? ? ? var myChart = echarts.init(document.getElementById('main')，‘null’萧锉，{renderer：‘svg’});
3珊随、指定圖表的配置項和數(shù)據(jù)
? ? ? ?var option = { … }
4、使用剛指定的配置項和數(shù)據(jù)顯示圖表柿隙。
? ? ?myChart.setOption(option);
eCharts初始化底層實現(xiàn)關(guān)鍵步驟：
1.獲取并記錄dom成全局變量：__DEV__叶洞。
2.校驗當前dom上是否存在Echarts圖表實例： getInstanceByDom(dom)
3.創(chuàng)建一個圖表實例 ：new ECharts(dom, theme, opts)
? ? 1)調(diào)用載ZRender繪圖引擎，創(chuàng)建一個實例zr：zrender.init（）
? ? ? ? a)根據(jù)參數(shù)選用canvas或GVG渲染器：renderer
? ? ? ? b)根據(jù)參數(shù)配置圖表分辨比：devicePixelRatio
? ? ? ? c)根據(jù)參數(shù)配置圖表尺寸：width禀崖、height
? ? 2)做一個事件監(jiān)聽（信息中心）：new EventProcessor（）
? ? 3)準備圖表和組件的視圖實例 ：prepareView（）
? ? ? ? a)根據(jù)系列類型選擇模型：doPrepare（）
? ? ? ? b)創(chuàng)建視圖實例：new Clazz( )
? ? 4)根據(jù)配置項注冊圖表項
? ? ? ? a)注冊主題：registerTheme（）
? ? ? ? b)注冊選項預(yù)處理器：registerPreprocessor（）
? ? ? ? c)注冊處理器：registerProcessor（）
? ? ? ? d)注冊坐標系統(tǒng)：registerCoordinateSystem（）
? ? ? ? e)注冊圖表布局：registerLayout（）
? ? ? ? f)注冊圖表行為：registerAction（）
? ? ? ? g)注冊視圖：registerVisual（）
? ? 5)渲染組件：renderComponents（）
? ? 6)渲染每個圖表：renderSeries（）
? ? ? ? a)數(shù)據(jù)渲染：zr.storage.getDisplayList()
? ? ? ? b)更新覆蓋層狀態(tài)updateHoverLayerStatus（）
? ? 7)為實例初始化鼠標事件：initEvents（）
? ? 8)啟用連接衩辟，進行狀態(tài)設(shè)置等：enableConnect(chart);
說明：本文僅為個人解讀，歡迎指正
