29Echarts - 柱状图（柱状图动画延迟）

效果图

源代码

	
		
		ECharts
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var xAxisData = [];
			var data1 = [];
			var data2 = [];
			for(var i = 0; i < 100; i++) {
				xAxisData.push('类目' + i);
				data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
				data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
			}

			option = {
				title: {
					text: '柱状图动画延迟'
				},
				legend: {
					data: ['bar', 'bar2'],
					align: 'left'
				},
				toolbox: {
					// y: 'bottom',
					feature: {
						magicType: {
							type: ['stack', 'tiled']
						},
						dataView: {},
						saveAsImage: {
							pixelRatio: 2
						}
					}
				},
				tooltip: {},
				xAxis: {
					data: xAxisData,
					silent: false,
					splitLine: {
						show: false
					}
				},
				yAxis: {},
				series: [{
					name: 'bar',
					type: 'bar',
					data: data1,
					animationDelay: function(idx) {
						return idx * 10;
					}
				}, {
					name: 'bar2',
					type: 'bar',
					data: data2,
					animationDelay: function(idx) {
						return idx * 10 + 100;
					}
				}],
				animationEasing: 'elasticOut',
				animationDelayUpdate: function(idx) {
					return idx * 5;
				}
			};
			myChart.setOption(option);