ECharts(官网：http://echarts.baidu.com)

注：对于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'

        }

    ]

});