[摘要]： 前面已經介紹了ECharts相關包的引入項目中的三種方式，請見：ECharts圖表組件初級入門之：如何將ECharts引入至項目中的幾種方式,接下來就是進入第二階段了，那就是圖表對象的初始化將會如何進行。 一、相關js文件的引入 這里我們采用標簽式引入文件的方式，我們引入兩個js文件，一個是esl.js文件和一個echarts.js。 <script src="js/esl.js" type="text/javascript"></script>< script src="js/echarts.js" type="text/javascript"></script> 二、ECharts對象的初始化 通過文件esl.js內封裝好的require獲得...
前面已經介紹了ECharts相關包的引入項目中的三種方式，請見：ECharts圖表組件初級入門之：如何將ECharts引入至項目中的幾種方式,接下來就是進入第二階段了，那就是圖表對象的初始化將會如何進行。
一、相關js文件的引入
這里我們采用標簽式引入文件的方式，我們引入兩個js文件，一個是esl.js文件和一個echarts.js。
1.
<script src="js/esl.js" type="text/javascript"></script>
2.
<script src="js/echarts.js" type="text/javascript"></script>
二、ECharts對象的初始化
通過文件esl.js內封裝好的require獲得echarts接口后可實例化圖表，echarts接口僅有一個方法init，執行init時傳入一個具備大小（如果沒有指定容器的大小將會按照0大小來處理即無法看到圖表）的dom節點（width、height可被計算得到即可，不一定可見）后即可實例化出圖表對象，圖表庫實現為多實例的，同一頁面可多次init出多個圖表。圖表實例可用方法見方法，引入ECharts后的的初始化代碼如下：
01.
// 作為入口
02.
require(
03.
[
04.
'echarts',
05.
'echarts/chart/pie'
06.
],
07.
//回調函數內執行圖表對象的初始化
08.
function(ec) {
09.
var myChart = ec.init(document.getElementById('main'));
10.
myChart.setOption({...});
11.
}
12.
);
13.
14.
// -----------------------------
15.
16.
// 非入口或再次使用，圖表已被加載注冊
17.
require('echarts').init(dom).setOption({...});
18.
19.
// 如果需要再次使用ECharts的圖表實例，建議你還是保存init返回的圖表實例吧
20.
var myChart = require('echarts').init(dom);
21.
myChart.setOption({...});
如果你不習慣於模塊化你也可以這樣進行初始化：
01.
//定義一個全局的圖表對象
02.
var ECharts;
03.
require(['echarts'], function(ec){
04.
//將對象保存下來
05.
ECharts = ec;
06.
});
07.
// 是的，把echarts加載后保存起來作為命名空間使用
08.
09.
//-----------
10.
//接下來我們就可以進行圖表的init操作了
11.
var myChart = ECharts.init(dom);
12.
13.
myChart.setOption({....});
注意事項：
1、再實例化之前請確保相關的js文件已經引入且路徑正確；
2、在執行圖表對象渲染方法init(dom)的時候，記住這里的dom是一個頁面容器元素的對象，請確保這個元素對象是存在的，否則執行了init(dom)方法時會報出尚未定義的錯誤；
3、dom元素一定要指定其大小，關於元素的大小我么可以通過css進行設置：
1.
<div id="main" style="width:400px;height:300px;"></div>
也可以采用動態的javascript代碼設置其大小屬性值。
如果此文有什么遺漏的地方還請大俠諒解，如果可以請留言補充，多謝關注！文章部分參考ECharts官方API