实现echarts图表滚动，设置⾃定义滚动条
echarts⾃带的dataZoom设置后触发的⿏标滚轮滚动事件会放⼤缩⼩echarts图表本⾝，⽽不是我们想要的图表滚动效果。
并且要实现⾃定义滚动条还是需要⾃⼰设置的滚动条⽤得舒服。通过dataZoom配置项设置很是⿇烦。
于是想出了通过内嵌⾼度溢出的图表，外层使⽤⾼度固定的div来设置滚动条。
<el-scrollbar >
<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
}
给外层加上绝对定位，并且提⾼层级。
element表格横向滚动条提⾼层级才能在⿏标移上图表时展⽰相关信息。不然会被隐藏图表覆盖⽽没有交互效果
效果如上图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。