echarts实现横向和纵向滚动条、dataZoom

文章目录

前言

**使用

echarts

会遇到这种情况，以柱状图为例子，当数据过多时，

echarts

图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小

barWidth

值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器

div

添加

overflow: scroll;

，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。言归正传，以上都不是最佳解决方式，

echarts

其实已经为提供好相应的

API

配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。**

1、横向滚动条

dataZoom:[{// 设置滚动条的隐藏与显示show:true,// 设置滚动条类型type:"slider",// 设置背景颜色backgroundColor:"rgb(19, 63, 100)",// 设置选中范围的填充颜色fillerColor:"rgb(16, 171, 198)",// 设置边框颜色borderColor:"rgb(19, 63, 100)",// 是否显示detail，即拖拽时候显示详细数值信息showDetail:false,// 数据窗口范围的起始数值startValue:0,// 数据窗口范围的结束数值（一页显示多少条数据）endValue:5,// empty：当前数据窗口外的数据，被设置为空。// 即不会影响其他轴的数据范围filterMode:"empty",// 设置滚动条宽度，相对于盒子宽度width:"50%",// 设置滚动条高度height:8,// 设置滚动条显示位置left:"center",// 是否锁定选择区域（或叫做数据窗口）的大小zoomLoxk:true,// 控制手柄的尺寸handleSize:0,// dataZoom-slider组件离容器下侧的距离bottom:3,},{// 没有下面这块的话，只能拖动滚动条，// 鼠标滚轮在区域内不能控制外部滚动条type:"inside",// 滚轮是否触发缩放zoomOnMouseWheel:false,// 鼠标滚轮触发滚动moveOnMouseMove:true,moveOnMouseWheel:true,},]

2、纵向滚动条

dataZoom:[{// 设置滚动条的隐藏或显示show:true,// 设置类型type:"slider",// 设置背景颜色backgroundColor:"rgb(19, 63, 100)",// 设置选中范围的填充颜色fillerColor:"rgb(16, 171, 198)",// 设置边框颜色borderColor:"rgb(19, 63, 100)",// 是否显示detail，即拖拽时候显示详细数值信息showDetail:false,// 数据窗口范围的起始数值startValue:0,// 数据窗口范围的结束数值（一页显示多少条数据）endValue:5,// 控制哪个轴，如果是number表示控制一个轴，// 如果是Array表示控制多个轴。此处控制第二根轴yAxisIndex:[0,1],// empty：当前数据窗口外的数据，被设置为空。// 即不会影响其他轴的数据范围filterMode:"empty",// 滚动条高度width:8,// 滚动条显示位置height:"80%",// 距离右边right:3,// 控制手柄的尺寸handleSize:0,// 是否锁定选择区域（或叫做数据窗口）的大小zoomLoxk:true,// 组件离容器上侧的距离// 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐top:"middle",},{// 没有下面这块的话，只能拖动滚动条，// 鼠标滚轮在区域内不能控制外部滚动条type:"inside",// 控制哪个轴，如果是number表示控制一个轴，// 如果是Array表示控制多个轴。此处控制第二根轴yAxisIndex:[0,1],// 滚轮是否触发缩放zoomOnMouseWheel:false,// 鼠标移动能否触发平移moveOnMouseMove:true,// 鼠标滚轮能否触发平移moveOnMouseWheel:true,},]