echarts如何给dataZoom的滚动条加border-radius？

Question

样式长这样，需要给滚动条加个圆角边，翻了api文档都没看到。

代码如下：

        dataZoom: [
          {
            type: 'slider', // 滑动条单独显示
            show: this.xCoordinateDesc.length > 8, // 是否显示滑动条
            startValue: 0, // 展示区域内容的起始数值
            endValue: 7, // 展示区域内容的结束数值 当前展示x坐标下标为0-7
            height: 6, // 滑动条组件高度
            bottom: 0, // 距离图表区域下边的距离
            borderRadius: 5,
            showDetail: false, // 拖拽时是否显示详情
            showDataShadow: false,
            fillerColor: '#00000033', // 平移条的填充颜色
            borderColor: 'transparent', // 边框颜色
            zoomLock: true, // 锁定视图
            brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
            // 通过该属性可以只滑动，不显示缩放功能
            handleStyle: {
              opacity: 0,
            },
            lineStyle: {
              opacity: 0,
            },
            textStyle: {
              fontSize: 0,
            }
          },
        ],

Answer 1

ECharts中滚动条样式可以通过修改dataZoom组件的handleStyle属性来实现。

例如，下面的代码演示了如何给dataZoom的滚动条添加圆角：

dataZoom: [
    {
        type: 'inside',
        handleStyle: {
            borderRadius: 10
        }
    }
]