In the dataZoom of Echarts K-line chart, the text on the left and right sides of the scroll bar changes the color style.

 

                    dataZoom: [{
                        textStyle: {
                            color: this.father //滚动条两边字体样式
                        },
                        dataBackground: {
                            areaStyle: {
                                opacity: 0.9,
                                color: '#ff3131',
                                width: 0.5
                            },
                            lineStyle: {
                                opacity: 0.9,
                                color: '#ff3131',
                                width: 0.5
                            }
                        },
                        type: 'slider',
                        show: true,
                        height: '3.5%',
                        bottom: '12ph',

                        //这里设置滚动条样式,和滚动条手柄样式
                        borderColor: '#8FDFFE',
                        backgroundColor: 'rgba(183,233,252,0.6)',
                        handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
                        handleColor: '#8FDFFE',
                        handleSize: 15,

                        start: 0,
                        end: 100,
                        brushSelect: true
                    }, {
                        type: 'inside'
                    }]