注：对于Echarts的使用范围与具体介绍在官网已经作了详细介绍，本文不再赘述，本文主要针对Echarts的两种引入方式做介绍（单文件引入和模块引入）

一：单文件引入

1 . 项目结构

2 . 在ECharts官网，下载ECharts的源码和示例文件。

3 .解压缩下载下来的Echars压缩包，找到doc\example\www\echarts\js目录，将里面的js文件全部取出来，放到项目js目录文件夹下。(我下载的是echarts-2.0.4)

4 . 在dome.html页面的顶端引入模块加载器esl.js。

5 . 为ECharts准备一个具备大小的Dom。

<div id="chartArea" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

6 . 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径。

require.config({

//echarts.js 包含除地图以外的全部图表 画地图得引用echarts-map.js

paths: {

echarts:'./js/echarts',

'echarts/chart/bar' : './js/echarts',

'echarts/chart/line': './js/echarts'

}

});

7 . 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

require(

[

'echarts',//需要画哪种类型的图 就一次加载哪种类型的文件

'echarts/chart/bar',

'echarts/chart/line'

],

//回调函数

function(ec) {

var myChart = ec.init(document.getElementById('chartArea'));

var option = {

title : {

text: '未来一周气温变化',

subtext: '纯属虚构'

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['最高气温','最低气温']

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

xAxis : [

{

type : 'category',

boundaryGap : false,

data : ['周一','周二','周三','周四','周五','周六','周日']

}

],

yAxis : [

{

type : 'value',

axisLabel : {

formatter: '{value} °C'

}

}

],

series : [

{

name:'最高气温',

type:'line',

data:[11, 11, 15, 13, 12, 13, 10],

smooth:true,

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

},

markLine : {

data : [

{type : 'average', name: '平均值'}

]

}

},

{

name:'最低气温',

type:'line',

data:[1, -2, 2, 5, 3, 2, 0],

markPoint : {

data : [

{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}

]

},

markLine : {

data : [

{type : 'average', name : '平均值'}

]

}

}

]

};

myChart.setOption(option);

}

);

二：模块引入

1 . 下载echarts包和zrender包到本地 两个包必须放在同一个目录下

2 . html文件里也必须给一个具备打小的DOM节点 且引入esl.js文件

3 . 配置信息如下

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