echarts自带的dataZoom设置后触发的鼠标滚轮滚动事件会放大缩小echarts图表本身,而不是我们想要的图表滚动效果。
并且要实现自定义滚动条还是需要自己设置的滚动条用得舒服。通过dataZoom配置项设置很是麻烦。
于是想出了通过内嵌高度溢出的图表,外层使用高度固定的div来设置滚动条。
<el-scrollbar style="height:235px;">
<div id="barchart"></div>
</el-scrollbar>
在图表外面加上一层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
}
给外层加上绝对定位,并且提高层级。
提高层级才能在鼠标移上图表时展示相关信息。不然会被隐藏图表覆盖而没有交互效果
效果如上图