ECharts(官网：http://echarts.baidu.com)
2 . 在ECharts官网，下载ECharts的源码和示例文件。
3 .解压缩下载下来的Echars压缩包，找到doc\example\www\echarts\js目录，将里面的js文件全部取出来，放到项目js目录文件夹下。(我下载的是echarts-2.0.4)
4 . 在dome.html页面的顶端引入模块加载器esl.js。
5 . 为ECharts准备一个具备大小的Dom。
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'
}
]
});