需求：echarts 条形图初始化显示5条数据，之后的数据滚动显示

一、效果图：

二、在option里加dataZoom属性

	dataZoom: [//滑动条
		{
			yAxisIndex: 0,//这里是从X轴的0刻度开始
			show: false,//是否显示滑动条，不影响使用
			type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
			startValue: 0, // 从头开始。
			endValue: 5  // 一次性展示5个。
		}
	],

三、通过定时器的方式刷新，改变statrValue，endValue

		this.timer = setInterval(function () {
		// 	// 每次向后滚动一个，最后一个从头开始。
			if (option.dataZoom[0].endValue == _this.dljgData.length) {
				option.dataZoom[0].endValue = 6; 
				option.dataZoom[0].startValue = 0;
			}
			else {
				option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
				option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
			}
			myChart.setOption(option);
		}, 5000);

	注意：在触发地图点击事件时需要clearInterval(this.timer) ，若没有及时清除定时器，效果图变乱。

四、完整代码：

			echarts() {
				var _this = this;
				var myChart = this.$echarts.init(document.getElementById('dljg'));
				var option = {
					title: {
						text: '代理机构排名',
						textStyle: {
							color: '#fff',
							fontSize: 15
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					textStyle: this.textStyle,
					dataZoom: [//滑动条
						{
							yAxisIndex: 0,//这里是从X轴的0刻度开始
							show: false,//是否显示滑动条，不影响使用
							type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
							startValue: 0, // 从头开始。
							endValue: 5  // 一次性展示5个。
						}
					],
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01],
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							show: false, // 不显示x轴
							textStyle: {
								color: '#ccc'
							}
						},
						splitLine: {
							show: false //去掉网格线
						}
					},
					yAxis: {
						type: 'category',
						inverse: true,	//倒叙
						data: this.getArrByColName(this.dljgData, '机构'),
						axisLabel: {
							show: true, // 不显示x轴
							textStyle: {
								color: '#ccc'
							},
						},
						splitLine: {
							show: false //去掉网格线
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							inside: true,
							splitNumber: 50,
							boundaryGap: [20, 20],
							textStyle: {
							  color: "#fff",
							  // verticalAlign: "top",
							  // align: "left",
							  padding: [-30, 0, 0, 0],
							},
						},
					},
					series: [{
						type: 'bar',
						barWidth: '20%',
						label:{			//柱形图上显示数据
							normal:{
								show:true,
								position: 'right',　	//条形图文字再 图的右侧
								formatter:function(value){
									return value.value
								},
								textStyle:{
								  color:'#ccc'
								}
							}
						},
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[{
										offset: 0,
										color: '#2CDAEA'
									}, //柱图渐变色
									{
										offset: 0.5,
										color: '#1FA9F3'
									}, //柱图渐变色
									{
										offset: 1,
										color: '#1786EF'
									}, //柱图渐变色
									]
								)
							},
						},
						data: this.getArrByColName(this.dljgData, '数量'), //[120, 200, 150, 80, 70, 110, 130],
					}]
	
				};

				myChart.setOption(option);

				//通过定时器的方式刷新，改变statrValue，endValue
				this.timer = setInterval(function () {
				// 	// 每次向后滚动一个，最后一个从头开始。
					if (option.dataZoom[0].endValue == _this.dljgData.length) {
						option.dataZoom[0].endValue = 6; 
						option.dataZoom[0].startValue = 0;
					}
					else {
						option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
						option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
					}
					myChart.setOption(option);
				}, 5000);
			},