Echarts自动滚动效果(划入停止，划出滚动)

基本思路分析：echarts 实现自动滚动效果，实现思路是利用echarts中option中的dataZoom属性,用定时器控制dataZoom中endValue和startValue变化，每次dataZoom变化都需要setOption重新渲染图表。

<template>
  <div @mouseenter="mouseoveAl" @mouseleave="mouseleaveAl" ref="echarts_sevenWG" id="echarts_sevenWG">
    
  </div>
</template>
<script>
	import * as echarts from 'echarts'
	export default{
		data(){
			return{
				myChart_sevenWG:null,
				option_sevenWG:{},
				KSMC:[],
				setInterValAl:null
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.echartsAl();
			})
		},
		methods: {
			//划入
			mouseoveAl(){
				clearInterval(this.setInterValAl)
				
			},
			//划出
			mouseleaveAl(){
				this.setIntervalAll();
			},
			setIntervalAll(){
				// 定时器
				let that = this;
				this.setInterValAl = setInterval(function() {
					// 每次向后滚动一个，最后一个从头开始。
					if (that.option_sevenWG.dataZoom[0].endValue == that.KSMC.length - 1) {
				  that.option_sevenWG.dataZoom[0].endValue = 3;
						that.option_sevenWG.dataZoom[0].startValue = 0;
					} else {
						that.option_sevenWG.dataZoom[0].endValue = that.option_sevenWG.dataZoom[0].endValue + 1;
						that.option_sevenWG.dataZoom[0].startValue = that.option_sevenWG.dataZoom[0].startValue + 1;
					}
					that.myChart_sevenWG.setOption(that.option_sevenWG);
				}, 2000);
			},
			echartsAl() {
				this.KSMC = ['1', '2', '3', '4', '5', '6', '7'];
				var colors = 'pink'
				this.option_sevenWG = {
					color: colors,
					/*tooltip : {
					    trigger: 'axis',
					    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					    }
					},*/
					grid: { //调整上下左右间距
						left: '4%',
						right: '4%',
						top: '20%',
						bottom: '15%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						axisTick: { // 去除坐标轴上的刻度线
							//alignWithLabel: true
							show: false
						},
						axisLine: { // x轴的颜色和宽度
							show: false,
							lineStyle: {
								color: colors, // x坐标轴的轴线颜色
								//width:3    //这里是坐标轴的宽度,可以去掉
							}
						},
						axisLabel: { // x轴的字体样式
							show: true, //这行代码控制着坐标轴x轴的文字是否显示
							textStyle: {
								//color: '#fff',   //x轴上的字体颜色
								fontSize: '0.5vw' // x轴字体大小
							},
							interval: 0, //文字显示不全并将文字倾斜
							rotate: 45, //倾斜的角度
							formatter: function(value) {
								//debugger  
								var ret = ""; //拼接加\n返回的类目项  
								var maxLength = 5; //每项显示文字个数  
								var valLength = value.length; //X轴类目项的文字个数  
								var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
								if (rowN > 1) //如果类目项的文字大于3,  
								{
									for (var i = 0; i < rowN; i++) {
										var temp = ""; //每次截取的字符串  
										var start = i * maxLength; //开始截取的位置  
										var end = start + maxLength; //结束截取的位置  
										//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
										temp = value.substring(start, end) + "\n";
										ret += temp; //凭借最终的字符串  
									}
									return ret;
								} else {
									return value;
								}
							}
		
						},
						data:this.KSMC
					}],
					dataZoom: [ //滑动条
						{
							xAxisIndex: 0, //这里是从X轴的0刻度开始
							show: true, //是否显示滑动条，不影响使用
							type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 slide 显示 组件  inside 内置组件
							startValue: 0, // 从头开始。
							endValue:3 // 一次性展示4个。
						}
					],
					yAxis: [{
						type: 'value',
						//minInterval:1,//最小数为1，避免刻度出现小数情况
						axisTick: { // 去除坐标轴上的刻度线
							//alignWithLabel: true
							show: false
						},
						splitLine: { // 控制网格线是否显示
							//show: false,   // 网格线是否显示
							lineStyle: { //  改变样式
								width: '0.2',
								color: '#507b7d' // 修改网格线颜色    
							}
						},
						axisLine: { // y轴的颜色和宽度
							show: false,
							lineStyle: {
								color: colors, // y坐标轴的轴线颜色
							}
						},
						axisLabel: { // y轴的字体样式
							show: true, //这行代码控制着坐标轴y轴的文字是否显示
							textStyle: {
								//color: '#fff',   //y轴上的字体颜色
								fontSize: '0.5vw' // y轴字体大小
							}
						}
					}],
					series: [{
						type: 'bar',
						barWidth: '28%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}]
				};
				this.myChart_sevenWG = null;
				this.$nextTick(() => {
				   this.myChart_sevenWG = echarts.init(this.$refs['echarts_sevenWG']);
				  
				   this.myChart_sevenWG.setOption(this.option_sevenWG);
				   this.setIntervalAll();
				  
				})
				
				
			}
		}
	}
</script>
<style scoped="scoped">
	#echarts_sevenWG{
		width: 1000px;
		height: 500px;
	}
</style>