- 滚动条手柄自定义图片
- 滚动条背景颜色
- 滚动条颜色
- 去除数据阴影(中间那条线)
- 滚动条显示数据条数控制
- 滚动条位置配置
- 数据不足八条不显示滚动条
- 滚动条刷选(长度缩放),brushSelect: false控制
import slide from '../../../../assets/images/class_statistical/slide.png'//最顶部引入图片
let scoreShow = false//配置滚动条出现条件
if (this.subNameArr.length > 8) {//超过八条才显示
scoreShow = true
}
dataZoom: [//滚轮设置
{
height: 16,
bottom: 15,
type: 'slider',
show: scoreShow,//少于八条不显示
showDataShadow: false,//false去除滚轮中间那条线
backgroundColor:"rgb(245,247,252)",//滚动条背景颜色
borderColor:"transparent",//滚动条边框颜色
fillerColor: "rgba(61,126,255, 0.1)", // 滚动条颜色
handleIcon:'image://' + slide ,//左右手柄图片
handleSize: 30,//手柄尺寸
showDetail: false,//拖拽不显示文字
startValue: 0, // 从头开始。
endValue: 7, // 实现最多八个
minValueSpan: 7, // 放大到最少几个
maxValueSpan: 7, // 缩小到最多几个
brushSelect: false,//刷选功能,false阻止滚动条条长度改变
},
{
type: "inside", // 支持内部鼠标滚动平移
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
}
],
原来:
实现效果: