如何使用TimeLine控制多个图表？

Question

@Kener-林峰 你好，想跟你请教个问题：

我现在需要使用一个时间轴控制多个图表，是不是需要先单独画一个空时间轴，再画需要被控制的图表，最后监听时间轴变更事件来设置被控制图表的值？

var myChart1_1 = echarts.init(document.getElementById('chart1-1'));
var option1_1 = {
	title : {
		text: '站点历史趋势'
	},
	tooltip : {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)"
	},
	legend: {
		orient : 'vertical',
		x : 'left',
		y : "center",
		data:['CR','ER','SR','WR','NR']
	},
	toolbox: {
		show : true,
		feature : {
			mark : {show: true},
			magicType : {
				show: true, 
				type: ['pie', 'funnel'],
				option: {
					funnel: {
						x: '25%',
						width: '50%',
						funnelAlign: 'left'
					}
				}
			},
			restore : {show: true},
			saveAsImage : {show: true}
		}
	},
	calculable : true,
	series : [
		{
			type:'pie',
			radius : '55%',
			center: ['50%', '50%'],
			data:[
				{value:200, name:'CR'},
				{value:100, name:'ER'},
				{value:110, name:'SR'},
				{value:310, name:'WR'},
				{value:280, name:'NR'}
			]
		}
	]
};
myChart1_1.setOption(option1_1);
var myChart1_2 = echarts.init(document.getElementById('chart1-2'));
var option1_2 = {
	title : {
		text: '人员历史趋势'
	},
	tooltip : {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)"
	},
	legend: {
		orient : 'vertical',
		x : 'left',
		y : "center",
		data:['CR','ER','SR','WR','NR']
	},
	toolbox: {
		show : true,
		feature : {
			mark : {show: true},
			magicType : {
				show: true, 
				type: ['pie', 'funnel'],
				option: {
					funnel: {
						x: '25%',
						width: '50%',
						funnelAlign: 'left'
					}
				}
			},
			restore : {show: true},
			saveAsImage : {show: true}
		}
	},
	calculable : true,
	series : [
		{
			type:'pie',
			radius : '55%',
			center: ['50%', '50%'],
			data:[
				{value:9, name:'CR'},
				{value:8, name:'ER'},
				{value:9, name:'SR'},
				{value:7, name:'WR'},
				{value:8, name:'NR'}
			]
		}
	]
};
myChart1_2.setOption(option1_2);
var myChart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
	timeline:{
		data:['2014-01-01','2014-02-01','2014-03-01','2014-04-01','2014-05-01'],
		label : {
			formatter : function(s) {
				var rs = s.slice(0, 7);
				return rs;
			}
		},
		autoPlay : true,
		playInterval : 1000
	},
	options:[
		{
			xAxis : [
				{
					type : 'category',
					data : ['CR','ER','SR','WR','NR']
				}
			],
			yAxis : [
				{
					type : 'value',
					//min : 99.9,
					//max : 100,
					//precision : 3,
					axisLabel : {
						formatter: '{value}'
					}
				}
			],
			series : [
				{
					name:'站点',
					type:'bar',
					data:[{value:200, name:'CR'}, {value:100, name:'ER'}, {value:110, name:'SR'}, {value:310, name:'WR'}, {value:280, name:'NR'}]
				},{
					name:'人员',
					type:'bar',
					data:[{value:4, name:'CR'}, {value:3, name:'ER'}, {value:3, name:'SR'}, {value:6, name:'WR'}, {value:5, name:'NR'}]
				}
			]
		},
		{
			series : [
				{
					data:[{value:501, name:'CR'}, {value:401, name:'ER'}, {value:310, name:'SR'}, {value:211, name:'WR'}, {value:181, name:'NR'}]
				},{
					data:[{value:4, name:'CR'}, {value:3, name:'ER'}, {value:3, name:'SR'}, {value:6, name:'WR'}, {value:5, name:'NR'}]
				}
			]
		},
		{
			series : [
				{
					data:[{value:102, name:'CR'}, {value:202, name:'ER'}, {value:312, name:'SR'}, {value:412, name:'WR'}, {value:582, name:'NR'}]
				},{
					data:[{value:4, name:'CR'}, {value:3, name:'ER'}, {value:3, name:'SR'}, {value:6, name:'WR'}, {value:5, name:'NR'}]
				}
			]
		},
		{
			series : [
				{
					data:[{value:10, name:'CR'}, {value:100, name:'ER'}, {value:1000, name:'SR'}, {value:10000, name:'WR'}, {value:20000, name:'NR'}]
				},{
					data:[{value:10, name:'CR'}, {value:20, name:'ER'}, {value:30, name:'SR'}, {value:40, name:'WR'}, {value:50, name:'NR'}]
				}
			]
		},
		{
			series : [
				{
					data:[{value:202, name:'CR'}, {value:102, name:'ER'}, {value:112, name:'SR'}, {value:312, name:'WR'}, {value:282, name:'NR'}]
				},{
					data:[{value:4, name:'CR'}, {value:3, name:'ER'}, {value:3, name:'SR'}, {value:6, name:'WR'}, {value:5, name:'NR'}]
				}
			]
		}
	]
};
myChart2.setOption(option2);
myChart2.on(echarts.config.EVENT.TIMELINE_CHANGED, function(a, b){
	option1_1.series[0].data = b.component.timeline.options[a.currentIndex].series[0].data;
	option1_2.series[0].data = b.component.timeline.options[a.currentIndex].series[1].data;
	myChart1_1.setOption(option1_1);
	myChart1_2.setOption(option1_2);
});

问题已解决，这里series是一个数组，修改过后已经可用了。

option1_1.series[0].data = b.component.timeline.options[a.currentIndex].series[0].data;
option1_2.series[0].data = b.component.timeline.options[a.currentIndex].series[1].data;

Answer 1

你的这个问题解决了我的问题，我想找时间轴事件的，感谢咯~

Answer 2

好的，谢谢

Answer 3

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