实现echarts图表滚动，设置自定义滚动条

echarts自带的dataZoom设置后触发的鼠标滚轮滚动事件会放大缩小echarts图表本身，而不是我们想要的图表滚动效果。

并且要实现自定义滚动条还是需要自己设置的滚动条用得舒服。通过dataZoom配置项设置很是麻烦。

于是想出了通过内嵌高度溢出的图表，外层使用高度固定的div来设置滚动条。

在图表外面加上一层element-ui的滚动条。

	#barchart{
		width: 1280px;
		height: 940px;
	}

图表高度与宽度设置。

由于图表是根据div宽高自适应生成的，所以滚动条出现时看不到图表的X轴。业务需求又要求既要能滚动又要能看到X轴。

于是就想到在图表上手动加上一个自定义X轴，但X轴的数值是根据配置项的数据自动计算来的，又搜不到Echarts的内置X轴数值生成算法。而且也不会动态变化。

所以就想顺水推舟用Echarts来解决Echarts。此时的想法是再生成一个配置项数据一样的图表，但是只显示X轴，将其固定。

这样就解决了所有问题。

又想通过设置barWidth为0来隐藏生成的柱状图。但是发现不行。

灵机一动设置颜色为rgba(x,x,x,0) 即颜色透明。就看不到拉。完美隐藏掉所有不想要的图表组件。

这时候只需要将X轴固定在希望的位置即可。

 

.el-scrollbar{
        position: absolute;
        top: 72px;
        left: 24px;
        z-index: 999
}

给外层加上绝对定位，并且提高层级。

提高层级才能在鼠标移上图表时展示相关信息。不然会被隐藏图表覆盖而没有交互效果

效果如上图