echarts scroll bar configuration

Scroll bar handle custom image
Scroll bar background color
scroll bar color
Remove data shadow (the middle line)
Scroll bar display data number control
Scroll bar position configuration
If there are less than eight pieces of data, the scroll bar will not be displayed.
Scroll bar brush selection (length scaling), brushSelect: false control

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, // 鼠标移动能触发数据窗口平移 
                                }
                            ],

turn out to be:

Realization effect:

echarts scroll bar configuration

Guess you like