先收藏這篇文章。

原文地址：http://www.cnblogs.com/zrtqsk/p/4019412.html?utm_source=tuicool

　　不貼地址了，想要了解的看一下特性就好了，想要入門的繼續往下看。

　　ECharts 底層依賴於 Html5 的輕量級的Canvas類庫ZRender ，這也是它的效果這麼絢麗的原因。它與 js charts類似，不依賴其他 js 類庫，相比之下 Highcharts還要依賴JQuery等類庫。不過，ECharts也不是什麼缺點都沒有的，線上演示平臺、文件，

　　初學者可能會被ECharts那個帶你入門的那2個示例弄暈，這裡來一個個解釋：

　　1、AMD規範的載入器——esl.js，這是什麼？

　　答：關於AMD規範可以參考阮一峰的這篇文章Javascript模組化程式設計（二）：AMD規範 簡單來說，AMD規範就是非同步方式載入模組的一種方式，避免因為模組載入過慢而導致瀏覽器“假死”。

　　2、我們先來看一下echart的大概的包：　

• echarts.js : 經過壓縮，包含除地圖外的全部圖表
• echarts-original.js : 未壓縮，可用於除錯，包含除地圖外的全部圖表
• echarts-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖資料
• echarts-original-map.js : 未壓縮，可用於除錯，全圖表，包含world，china以及34個省市級地圖資料

 　　看得出，這種分類非常有意義。

　　3、echarts更規範的一點，那就是模組化載入，需要哪個部分就是用哪個部分。

　　關於Echarts的那個入門圖表，我想很多新手跟我一樣的迷惑，require和require.config這個兩個公共方法到底什麼來的？

　　答：AMD規範的載入器——esl.js的公共方法。（如有錯誤，請指正。）

　　4、require.config的作用是什麼？

　　答：為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需的圖表路徑。一切盡在echarts-2.0.4資料夾下的src資料夾中。

　　5、解釋一下require方法？

　　答：require方法有2個引數。

　　第一個引數為一個數組，陣列元素是需要載入的echarts模組，需要哪個就載入哪個。（經本人測試，這個陣列傳入一個空陣列都是可以的 !- -）莫非，傳入不正確，會載入全部檔案到記憶體，傳入正確就載入部分模組到記憶體？求大神解答！

　　第二個引數為一個帶一個引數的方法：function (ec){}, 這個ec物件就是echarts物件了。

　　OK，基本解釋完了。可能初學者看了Eharts入門例項還是不太理解那Echarts3種匯入方式的用法。（入門示例只有2種——標籤式單檔案引入和模組化單檔案引入）

　　因為入門例項裡，js檔案指向的是百度伺服器上的資源，而我們一般開發，js資源都是放在本地的。

　　6、來看一下，本地建立3種Echarts匯入的例子，下面是那3個示例檔案的原始碼（官網Demo粗略修改而成）：

　　（1）、標籤式單檔案引入.html：　　

 　　需要注意的是，可以直接引入的單檔案只有：

• echarts-plain.js : 經過壓縮，包含除地圖外的全部圖表
• echarts-plain-original.js : 未壓縮，可用於除錯，包含除地圖外的全部圖表
• echarts-plain-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖資料
• echarts-plain-original-map.js : 未壓縮，可用於除錯，全圖表，包含world，china以及34個省市級地圖資料

　　而除了這些帶“plain”字眼的庫，其他庫都是含echarts這個變數的。匯入其他庫，會出現問題：echarts未定義。

　　（2）、模組化包引入.html，這個就需要用到2個src檔案。

　　（3）、模組化單檔案引入.html

　　2、如果上面的還有不明白的，參考一下我的本地目錄：

　　js中有如下的檔案：

　　其中，src是echarts-2.0.4資料夾下的src資料夾，zrender裡面也有一個src資料夾，是zrender-2.0.4資料夾下面的src資料夾。

 　　最後吐槽一句：Echarts的這個文件做的真是太粗略了，實在是朦朦朧朧，含糊不清。跟Highcharts之類的比起來差遠了。想要詳細瞭解各種特性，多看例項吧。。。

　　附上文例項下載連結：戳這裡

　　若有什麼地方寫的不對，歡迎指正，謝謝！