关于将ECharts引入至项目中的几种方式
方式一：模块化包引入
如果你的项目本身就是模块化的，那引入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'
}
]
});
echarts3模块化包引入源码方法
<html>
<head>
<title>Echarts3模块化包引入源码-入门title>
<meta charset="utf-8" content="text/html">
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
body>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-1-4/esl.js">script>
<script >
require.config({
packages: [
{
name: 'zrender',
location: 'zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
},
{
name: 'echarts',
location: 'echarts-master/src',
main: 'echarts'
}
]
// urlArgs: '_v_=' + +new Date()
});
require([
'echarts',
'echarts/chart/bar',
'echarts/component/legend',
'echarts/component/axis'
],function(echarts){
//
// // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量2']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量2',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
script>
html>- 1
- 2
- 3
题外话
方式二：模块化单文件引入（推荐）
我们建议你使用单一文件引入，如你所发现的，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个省市级地图数据