[5.0] [FEATURE] Add select by brushing in dataZoom

[pissang]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

This pull request brings select by brushing interaction in dataZoom. This new interaction also includes changes in UI.

Details

Currently this feature is enabled by default. It can be turned off by setting brushSelect: false.

If it's enabled, it will show an extra handle to indicate the drag zone. Here is a picture to explain the areas for different interactions.

And an interaction GIF:

New API

dataZoom: {

    brushSelect?: boolean
    brushStyle?: ItemStyleOption

    /**
     * Icon to indicate it is a draggable panel.
     */
    moveHandleIcon?: string
    moveHandleStyle?: ItemStyleOption
    /**
     * Height of handle rect. Can be a percent string relative to the slider height.
     */
    moveHandleSize?: number
    
    emphasis: {
        moveHandleStyle?: ItemStyleOption
    }
}

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍