方式一：模块化包引入

如果你的项目本身就是模块化的，那引入echarts将很简单，只需要配置好packet路径指向src即可，而且你还可以实现图表的按需加载，由于echarts依赖底层zrender，建议你同时下载zrender到本地，可参考demo，你需要配置如下。

需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中很基本也是很重要的规则，务必在上线时做文件的连接压缩，实例代码如下所示： 

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',      
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});

方式二：模块化单文件引入（推荐）

我们建议你使用单一文件引入，如你所发现的，build文件夹下已经生成了多个单文件见下，根据你的需求使用：

1、echarts.js : 经过压缩，包含除地图外的全部图表

2、echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表

3、echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据

4、echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

如果需要更加定制的打包文件，建议在node环境下安装require.js，build文件夹内为你准备好配置项，可根据你的项目需求，修改config-tpl.js以构建你的最佳配置。

采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，你需要配置如下：

 

//from echarts example
require.config({
    paths:{ 
        'echarts:'./js/echarts',
        'echarts/chart/bar' : './js/echarts',       // 把所需图表指向单文件
        'echarts/chart/line': './js/echarts'
    }
});

 

//from echarts example
require(
    [
        'echarts',
        'echarts/chart/line',   // 按需加载所需图表
        'echarts/chart/bar'
    ],
    function (ec) {
        var myChart = ec.init(domMain);
        var option = {
            ...
        }
        myChart.setOption(option);
    }
);

总结来说，模块化如何引入ECharts，你都需要如下4步：

1、引入一个模块加载器，如esl.js或者require.js

2、为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）

3、为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明

4、动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

方式三：标签式单文件引入

 

自1.3.5开始，ECharts提供标签式引入。如果你 的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你 采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空 间：echarts，zrender，可参考ECharts标签式引入 

//from echarts example
< script src="example/www2/js/echarts-plain.js" data-ke-src="example/www2/js/echarts-plain.js" > < /script>
< script >
    var myChart = echarts.init(domMain);
    var option = {
        ...
    }
    myChart.setOption(option);
< /script>

可以直接引入的单文件如下：

1、echarts-plain.js : 经过压缩，包含除地图外的全部图表

2、echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表

3、echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据

4、echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据