Echarts 动态添加series实例

require.config({
paths : {
echarts : '../resource/js/dist'
}
}); //require.config配置完成就可以动态加载echarts
require(
[ 'echarts', 'echarts/chart/line'],
callBack
//回调函数
);

var myChart;
var option;
function callBack(ec) {
myChart = ec.init(document.getElementById('main'));//初始化接口，返回EChart实例  (macarons /infographic/helianthus .. 为主题参数)
window.onresize = myChart.resize;
myChart.showLoading();
option = {
title : {
text : '风机测点历史数据曲线回放', //标题文本 '\n'为换行
x : "center",
y : "top"
},
tooltip : {
trigger : 'axis'
},
legend : { //图例
show : true,
data : [],//图例内容数组，数组项通常为{string}，每一项代表一个系列的name
x : 'center',
y : '40'
}, 
toolbox : { //工具栏
show : true,
feature : {
mark : {show : true},
dataView : {show : true,readOnly : false},
dataZoom : {show : true},
restore : {show : true},
saveAsImage : {show : true}
}
},
xAxis : [ {
name : '历史时间',
type : 'category', //横轴类型 有'category'类目型，'value'数值型，'time'时间型
boundaryGap : false,
data : [],
axisLabel : {
formatter : '{value}'
}
} ],
yAxis : [ {
name : '历史数值',
type : 'value',//坐标轴文本标签
axisLabel : {
formatter : '{value}'
}
} ],
dataZoom : { //数据区域缩放，仅对直角坐标系图表有效
show : true, //是否显示，当show为true时则接管使用指定类目轴的全部系列数据，如不指定则接管全部直角坐标系数据
realtime : true, //缩放变化是否实时显示。
start : 0, //选择起始比例，默认为0%；从第一个数据开始，
end : 100
//选择结束比例，默认为100%；到最后一个数据，
},
series : []
};
var chk_value = [];
$('input[name="eq_ck"]:checked').each(function() {//遍历每一个复选框，其中选中的执行函数      
chk_value.push($(this).val());//将选中的值添加到数组chk_value中      
});
var url = "equipmentHistorysAjax.action?theDay="
+ $("#theDay").val() + "&endDay="
+ $("#endDay").val() + "&eqs=" + chk_value
+ "&def=" + $("#def").val() + "&rate="
+ $("#rate").val();
var sArr = [];
var legendArr = [];
var timeArr = [];
$.ajax({
url : url,
type : "post",
async : false,//同步执行
cache : false,
dataType : "json",
iModified:true,
success : function(result) {
if (result) {
for (i = 0; i < result.length; i++) {
if(null!=result[i]&&typeof(result[i].code)!='undefined'){
legendArr.push(result[i].code);
var valueArr = [];
}
if (null!=result[i]&&typeof(result[i].list)!='undefined'&&null!=result[i].list) {
timeArr.length = 0;
for (j = 0; j < result[i].list.length; j++) {
if(result[i].list[j]!=null){
timeArr.push(format(result[i].list[j].time,"yyyy-MM-dd HH:mm:ss"));
valueArr.push(result[i].list[j].value);
}
}
}
if(null!=result[i]&&typeof(result[i].code)!='undefined'&&typeof(result[i].list)!='undefined'){
sArr.push(valueArr);
}
}
}
},
error : function(errorMsg) {
alert("请求数据失败");
}
});
option.legend.data = legendArr;
option.xAxis[0].data = timeArr;
for (i = 0; i < sArr.length; i++) {
var item = {
name : legendArr[i],
type : 'line',
data : sArr[i],
smooth : true,//平滑曲线显示
legendHoverLink : true,//是否启用图例（legend）hover时的联动响应（高亮显示
markPoint : {//最大最小值标记
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {//平均线
data : [ {
type : 'average',
name : '平均值'
} ]
}
}
option.series.push(item);
};
clearTimeout(loadingTicket);
var loadingTicket = setTimeout(function() {
myChart.hideLoading();
myChart.setOption(option);
}, 1000);
}