关于timeline动态添加series个数

Biggagol 发布于 2015/11/01 02:29
阅读 506
收藏 0

@Kener-林峰 你好,想跟你请教个问题:timeline的时间点是通过请求动态载入的,此时series的个数怎么动态的配置呢。

timeline可以控制同一图表实例内多个图表类型,每一个timeline里的option是一个完整的多图表混搭option就行。

按照这句话我尝试了很多次,还是没解决。请您帮我看下页面方法,谢谢。

// 柱状与折线
require([ 'echarts', 'echarts/theme/macarons', 'echarts/chart/bar',
'echarts/chart/line' ], function(ec, theme) {
var myChart = ec.init(document.getElementById('left'), theme);
var option = {
timeline : {
data : [ '2013', '2014', '2015' ],// TODO
autoPlay : true,
playInterval : 1000
},options : [ {
title : {
'text' : '2013'// TODO
},
tooltip : {
'trigger' : 'axis'
},
legend : {
x : 'right',
'data' : [ 'stuTotal' ],// TODO 数据种类
'selected' : true
},
toolbox : {
'show' : true,
orient : 'vertical',
x : 'right',
y : 'center',
'feature' : {
'dataView' : {
'show' : true,
'readOnly' : false
},
'magicType' : {
'show' : true,
'type' : [ 'line', 'bar', 'stack', 'tiled' ]
},
'restore' : {
'show' : true
},
'saveAsImage' : {
'show' : true
}
}
},
calculable : true,
grid : {
'y' : 80,
'y2' : 100
},
xAxis : [ {
'type' : 'category',
'axisLabel' : {
'interval' : 0
},
'data' : [ '1月', '2月', '3月', '4月'/*'5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月'*/ ]
} ],
yAxis : [ {
'type' : 'value',
'name' : '个数',
'max' : 500
} ],
series : [ {
'name' : 'stuTotal',
'type' : 'bar',
'data' : [ '100', '200', '322', '499' ]
} ]
} ]
};
var addOption={
options : [  {
title : {
'text' : '2014'// TODO
},
tooltip : {
'trigger' : 'axis'
},
legend : {
x : 'right',
'data' : [ 'stuTotal' ],// TODO 数据种类
'selected' : true
},
toolbox : {
'show' : true,
orient : 'vertical',
x : 'right',
y : 'center',
'feature' : {
'dataView' : {
'show' : true,
'readOnly' : false
},
'magicType' : {
'show' : true,
'type' : [ 'line', 'bar', 'stack', 'tiled' ]
},
'restore' : {
'show' : true
},
'saveAsImage' : {
'show' : true
}
}
},
calculable : true,
grid : {
'y' : 80,
'y2' : 100
},
xAxis : [ {
'type' : 'category',
'axisLabel' : {
'interval' : 0
},
'data' : [ '1月', '2月', '3月', '5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月' ]
} ],
yAxis : [ {
'type' : 'value',
'name' : '个数',
'max' : 500
} ],
series : [ {
'name' : 'stuTotal',
'type' : 'bar',
'data' : [ '411', '300', '222', '99' ]
} ]
} ]
};
myChart.setOption(option);
myChart.setOption(addOption);
});

以下是话题补充:

@Biggagol:问题现象是无法在下一个时间轴点显示下一option设置的图表数据。notMerge设置为true也无效果。 (2015/11/01 02:32)
@Biggagol:好的吧。。。我解决了。。。 (2015/11/01 14:22)
加载中
0
Biggagol
Biggagol
var myChart = ec.init(document.getElementById('left'), theme);
var option = {
timeline : {
data : [ '2013', '2014', '2015' ],// TODO
autoPlay : true,
playInterval : 1000
},options : [ {
title : {
'text' : '2013'// TODO
},
tooltip : {
'trigger' : 'axis'
},
legend : {
x : 'right',
'data' : [ 'stuTotal' ],// TODO 数据种类
'selected' : true
},
toolbox : {
'show' : true,
orient : 'vertical',
x : 'right',
y : 'center',
'feature' : {
'dataView' : {
'show' : true,
'readOnly' : false
},
'magicType' : {
'show' : true,
'type' : [ 'line', 'bar', 'stack', 'tiled' ]
},
'restore' : {
'show' : true
},
'saveAsImage' : {
'show' : true
}
}
},
calculable : true,
grid : {
'y' : 80,
'y2' : 100
},
xAxis : [ {
'type' : 'category',
'axisLabel' : {
'interval' : 0
},
'data' : [ '1月', '2月', '3月', '4月'/*'5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月'*/ ]
} ],
yAxis : [ {
'type' : 'value',
'name' : '个数',
'max' : 500
} ],
series : [ {
'name' : 'stuTotal',
'type' : 'bar',
'data' : [ '100', '200', '322', '499' ]
} ]
} ]
};
option.options.push({title : {'text':'2014'},series : [ {
'name' : 'stuTotal',
'type' : 'bar',
'data' : [ '400', '300', '222', '99' ]
} ]
});
option.options.push({title : {'text':'2015'},series : [ {
'name' : 'stuTotal',
'type' : 'bar',
'data' : [ '200', '300', '122', '399' ]
} ]
});
myChart.setOption(option);
});
返回顶部
顶部