// 路径配置

require.config({

paths: {

echarts: './js'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/line', // 折线图

'echarts/chart/bar'  // 柱状图

],

function (ec) {

var myChart =

ec.init(document.getElementByIdx_x('main'));

var myChartx =

ec.init(document.getElementByIdx_x('mainx'));

option = {

//标题

title : {

text: '未来一周气温变化',   //主标题文本

subtext: '纯属虚构' //副标题文本

},

//提示框

tooltip : {

trigger: 'axis' //提示类型

},

//图例

legend: {

data:['最高气温']    //图例 内容

},

//工具箱

toolbox: {

show : true,    //显示策略

feature : { //启用功能

magicType : {//动态类型切换

show: true,

//'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie',

'funnel'

type: ['line', 'bar']

},

dataView : {    //数据视图

show: true,

readOnly: false,

optionToContent: function(opt) {

var axisData = opt.xAxis[0].data;

var series = opt.series;

var table = '

'

+ '

'

+ '

'

+ '

'

+ '

';

for (var i = 0, l = axisData.length; i < l; i++)

{

table += '

'

+ '

'

+ '

'

+ '

'

+ '

';

}

table += '

时间

' + series[0].name + '

' + series[1].name + '

' + axisData[i] + '

' + series[0].data[i] + '

' + series[1].data[i] + '

';

return table;

}

},

restore : {show: true} //还原，复位原始图表

}

},

//坐标

xAxis : [

{

//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'

type : 'category',

boundaryGap : false,

//坐标轴两端空白策略，数组内数值代表百分比

//类目型坐标轴文本标签数组，指定label内容

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

//横轴线条

axisLine:{

lineStyle:{

color:'#333',   //颜色

width:'1'   //线条高度

}

},

//分隔线，默认显示

splitLine:{

show:false //是否显示，默认为true

}

}

],

//坐标

yAxis : [

{

//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'

type : 'value',

//坐标轴文本标签

axisLabel : {

formatter: '{value} 人' //间隔名称格式器%

},

//竖轴线条

axisLine:{

lineStyle:{

color:'#333',   //颜色

width:'1'   //线条高度

}

},

splitLine:{

show:false

}

}

],

series : [

{

name:'最高气温',    //系列名称

type:'line',    //图表类型

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

//系列中的数据内容数组

smooth:'true',  //平滑曲线显示

stack:'null',

itemStyle : {   //图形样式

normal: {   //默认样式

label : {

//标签

show: true,     //显示策略

position: 'right' //标签显示位置

}

}

}

}

]

};

optionx = {

//标题

title : {

text: '未来一周气温变化',   //主标题文本

subtext: '纯属虚构' //副标题文本

},

//提示框

tooltip : {

trigger: 'axis' //提示类型

},

//图例

legend: {

data:['最低气温']    //图例 内容

},

//工具箱

toolbox: {

show : true,    //显示策略

feature : { //启用功能

magicType : {//动态类型切换

show: true,

//'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie',

'funnel'

type: ['line', 'bar']

},

dataView : {    //数据视图

show: true,

readOnly: false,

optionToContent: function(opt) {

var axisData = opt.xAxis[0].data;

var series = opt.series;

var table = '

'

+ '

'

+ '

'

+ '

'

+ '

';

for (var i = 0, l = axisData.length; i < l; i++)

{

table += '

'

+ '

'

+ '

'

+ '

'

+ '

';

}

table += '

时间

' + series[0].name + '

' + series[1].name + '

' + axisData[i] + '

' + series[0].data[i] + '

' + series[1].data[i] + '

';

return table;

}

},

restore : {show: true} //还原，复位原始图表

}

},

//坐标

xAxis : [

{

//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'

type : 'category',

boundaryGap : false,

//坐标轴两端空白策略，数组内数值代表百分比

//类目型坐标轴文本标签数组，指定label内容

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

//横轴线条

axisLine:{

lineStyle:{

color:'#333',   //颜色

width:'1'   //线条高度

}

},

//分隔线，默认显示

splitLine:{

show:false //是否显示，默认为true

}

}

],

//坐标

yAxis : [

{

//坐标轴类型，横轴默认为类目型'category' 纵轴默认为数值型'value'

type : 'value',

//坐标轴文本标签

axisLabel : {

formatter: '{value} 人' //间隔名称格式器%

},

//竖轴线条

axisLine:{

lineStyle:{

color:'#333',   //颜色

width:'1'   //线条高度

}

},

splitLine:{

show:false

}

}

],

series : [

{

name:'最低气温',    //系列名称

type:'line',    //图表类型

data:[4, 21, 6, 7, 9, 15, 2],  //系列中的数据内容数组

smooth:'true',  //平滑曲线显示

stack:'null',

itemStyle : {   //图形样式

normal: {   //默认样式

label : {

//标签

show: true,     //显示策略

position: 'right' //标签显示位置

}

}

}

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

myChartx.setOption(optionx);

//图标内容大小自适应

setTimeout(function (){

window.onresize = function () {

myChart.resize();

myChartx.resize();

}

},1)

}

);