ECharts DataZoom滚动条圆角如何设置？

在 ECharts 中，dataZoom 组件用于实现图表的缩放和滚动功能。默认情况下，dataZoom 的滚动条是直角矩形，但你可以通过自定义样式来设置滚动条的圆角。

要设置 dataZoom 滚动条的圆角，可以使用 dataZoom 组件的 handleStyle 和 moveHandleStyle 属性。这些属性允许你自定义滚动条手柄的样式，包括圆角。

以下是一个示例代码，展示如何设置 dataZoom 滚动条的圆角：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }],
    dataZoom: [{
        type: 'slider', // 使用滑动条型 dataZoom
        start: 0, // 初始位置
        end: 50, // 结束位置
        handleStyle: {
            color: '#fff', // 手柄颜色
            borderColor: '#666', // 手柄边框颜色
            borderWidth: 1, // 手柄边框宽度
            borderType: 'solid', // 手柄边框类型
            borderRadius: 5 // 手柄圆角半径
        },
        moveHandleStyle: {
            color: '#fff', // 移动手柄颜色
            borderColor: '#666', // 移动手柄边框颜色
            borderWidth: 1, // 移动手柄边框宽度
            borderType: 'solid', // 移动手柄边框类型
            borderRadius: 5 // 移动手柄圆角半径
        }
    }]
};

关键点解释：

• handleStyle: 用于设置滚动条手柄的样式，包括颜色、边框、圆角等。
• moveHandleStyle: 用于设置移动手柄的样式，通常与 handleStyle 类似。
• borderRadius: 用于设置圆角半径，值越大，圆角越明显。

其他注意事项：

• 如果你使用的是 inside 类型的 dataZoom（即内嵌式缩放），则没有滚动条手柄，因此不需要设置 handleStyle 和 moveHandleStyle。
• 你可以根据需要调整 borderRadius 的值，以达到你想要的圆角效果。

通过这种方式，你可以轻松地为 ECharts 的 dataZoom 滚动条设置圆角，使其更符合你的设计需求。