[摘要]： 前面已经介绍了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