E charts x轴自动滚动展示---dataZoom

<div id="chartsStudy"></div>

<script>
import * as echarts from "echarts";
export default{
	methods:{
		chartDom(){
			var myChart = echarts.init(document.getElementById("chartsStudy"))
			var xData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
			var option;
			option = {
				grid: {
          			left: "3%",
          			top: "16%",
          			right: "3%",
          			bottom: 0,
          			containLabel: true, // 为了防止数值过大而超出视图
        		},
        		tooltip:{},
        		xAxis:{},
        		yAxis:{},
        		dataZoom:[
        			{
        				xAxisIndex: 0, // 这里是从X轴的0刻度开始
        				show: false, // 是否显示滑动条，不影响使用
        				type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom组件
                        startValue: 0, // 从头开始。
                        endValue: 4, // 一次性展示多少个。
        			}
        		]
			}
			if(option&&typeof option == "object"){
				myChart.setOption(option)
				// 定时自动滚动
				this.timer = setInterval(() => {
					if(xData.length <= 4){
						clearInterval(this.timer)
						return
					}
					if(option.dataZoom[0].endValue >= xData.length){
						option.dataZoom[0].endValue = 4
						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)
				}, 2000)
				
			}
		}
	}
}
</script>