echarts 动态数据动画效果

在做项目时，当我们用到echarts图表时，大部分产品经理都会要求我们给图表加上一些动画效果，让页面看起来更加炫酷。其实给图表加上动画效果不难，如果数据是实时数据这样做动画效果会更简单点，就怕数据不是实时数据还非要加动画。
接下来我说下echarts 数据动画效果，还是老规矩，先看下效果图

这是个柱形图，我就截图放上来，大家将就的看下哈，想看实际效果可以把下面的代码复制到本地页面上去，自己运行下。接下来就是代码了。

var dom = document.getElementById("p_columnar");
			var myChart = echarts.init(dom);
			var app = {};
			var option;
			option = {
				grid: {
					top: '18%',
					right: '2%',
					bottom: '18%',
					left: '10%'
				},
				xAxis: {
					type: 'category',
					//boundaryGap: false,//去除图表四周留白
					axisTick: { //x轴刻度
						show: false
					},
					axisLine: { //x轴线条颜色
						show: true,
						lineStyle: {
							color: '#374186',
							width: 0.5
						}
					},
					axisLabel: {
						show: true,
						rotate: 40, //文字倾斜度
						textStyle: {
							color: '#b1bcff', //更改坐标轴文字颜色
							fontSize: 14 //更改坐标轴文字大小
						}
					},
					data: ['大乐透', '竞彩', '七星彩', '排3', '排5', '即开', '顶呱呱', '传足']
				},
				yAxis: {
					type: 'value',
					//interval: 100, //刻度值间隔值
					name: '万',
					nameTextStyle: {
						padding: [0, 30, 5, 0], // y轴name位置
						color: '#b1bcff', //更改单位文字颜色
						fontSize: 15 //更改单位文字大小
					},
					splitLine: { //网格线
						lineStyle: {
							//type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
							color: '#374186', //网格线颜色
							width: 0.5
						},
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#b1bcff', //更改坐标轴文字颜色
							fontSize: 15 //更改坐标轴文字大小
						}
					},
					axisLine: {
						//y轴线条颜色
						show: false,
					},
				},
				animationDuration: 3000,
				series: [{
					barWidth: 20, //柱形宽度
					showBackground: false, //柱形背景色
					itemStyle: { //柱形渐变色
						normal: {
							//barBorderRadius: 6, //柱形圆角
							color: new echarts.graphic.LinearGradient(
								0, 0, 0, 1,
								[{
										offset: 0,
										color: '#188df0'
									},
									{
										offset: 1,
										color: '#36d1dc'
									}
								]
							),
						},
					},
					label: { //显示当前柱形数值
						show: true,
						position: 'top',
						textStyle: {
							color: '#15d0dd', //更改坐标轴文字颜色
							fontSize: 15 //更改坐标轴文字大小
						}
					},
					data: [49, 71, 106, 129, 144, 176, 135, 148],
					type: 'bar'
				}]
			};

			var mychart1 = echarts.init(document.getElementById("p_columnar"));
			//模拟实时数据
			var data = [
				[23, 42, 53, 23, 42, 47, 112, 212],
				[29, 64, 56, 98, 75, 67, 172, 312],
				[43, 82, 80, 116, 95, 367, 192, 412],
				[61, 105, 165, 156, 155, 500, 220, 512],
				[123, 234, 533, 206, 405, 667, 362, 612],
			];
			//定时器
			setInterval(getItem, 2000);
			function getItem() {
				var random = data[parseInt(Math.random() * data.length)];
				option.series[0].data = random; //获取series的第一行数据，并将模拟的数据赋值给他
				mychart1.setOption(option); //重新加载图表
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			};

以上代码就是以柱形图为例做的数据动画效果，做个笔记记录下，欢迎大家点评。