关于echarts横轴展示不全使用滚动条(dataZoom)的方法和注意点

最近的项目需要用到echarts图表来渲染数据，横轴的数据呢，是不固定，根据选择日期去筛选的，最大长度选择180天，要是真的有用户选择了180，那不就炸了，就算再大的电脑，横轴也展示不下啊。所以echarts官网给了一个解决方案，就是有内置的滚动条,dataZoom.那么我就来说说，如何很好的使用这个滚动条
首先，先上代码

dataZoom: [
					{
						orient: "horizontal",
						show: this.zoomShow,//控制滚动条显示隐藏
						realtime: true, //拖动滚动条时是否动态的更新图表数据
						height: 25, //滚动条高度
						start: 0, //滚动条开始位置（共100等份）
						end: this.endValue,//滚动条结束位置
						bottom: "4%",
						zoomLock: true, //控制面板是否进行缩放
					},
				],

这个是option里需要配置的东西

			if (this.xData.length > 10) {//this.xData是横轴的数据，通过后台动态获取的
					this.zoomShow = true;//通过横轴数据多少来判断滚动条是否显示(官网说滚动条不显示，但过滤数据的功能还在，过滤数据请移步官网去看具体配置项说明)
					this.endValue = (10 / this.xData.length) * 100;
				} else {
					this.zoomShow = false;
					this.endValue = 100;//这里一定要注意不显示滚动条的时候一定要把滚动条结束位置设置一下，不然会有bug
				}

因为我这里是日期显示，所以我这边电脑横轴显示是10条数据最佳，所以我动态设置了横轴的滚动条的显示隐藏，以便更很好的控制数据，至于滚动条的样式不好看啥的，自己去官网看配置项自己配置下就好
over!