fix(candlestick): support cursor option

src/chart/candlestick/CandlestickSeries.ts

@@ -52,6 +52,7 @@ export interface CandlestickStateOption {
 }
 export interface CandlestickDataItemOption
     extends CandlestickStateOption, StatesOptionMixin<CandlestickStateOption, ExtraStateOption> {
+    cursor?: string
     value: CandlestickDataValue
 }
 

src/chart/candlestick/CandlestickView.ts

@@ -301,6 +301,9 @@ function setBoxCommon(el: NormalBoxPath, data: SeriesData, dataIndex: number, is
     el.useStyle(data.getItemVisual(dataIndex, 'style'));
     el.style.strokeNoScale = true;
 
+    const cursorStyle = itemModel.getShallow('cursor');
+    cursorStyle && el.attr('cursor', cursorStyle);
+
     el.__simpleBox = isSimpleBox;
 
     setStatesStylesFromModel(el, itemModel);
@@ -429,6 +432,9 @@ function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickS
     el.useStyle(itemStyle);
     el.style.fill = null;
     el.style.stroke = borderColor;
+
+    const cursorStyle = seriesModel.get('cursor');
+    cursorStyle && el.attr('cursor', cursorStyle);
 }
 
 

src/component/dataZoom/InsideZoomModel.ts

@@ -40,6 +40,12 @@ export interface InsideDataZoomOption extends DataZoomOption {
 
     preventDefaultMouseMove?: boolean
 
+    /**
+     * Mouse cursor styles on states "can grab" and "grabbing".
+     */
+    cursorGrab?: string
+    cursorGrabbing?: string
+
     /**
      * Inside dataZoom don't support textStyle
      */

src/component/dataZoom/roams.ts

@@ -29,7 +29,7 @@ import { makeInner } from '../../util/model';
 import { Dictionary, RoamOptionMixin, ZRElementEvent } from '../../util/types';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import InsideZoomModel from './InsideZoomModel';
-import { each, curry, Curry1, HashMap, createHashMap } from 'zrender/src/core/util';
+import { each, curry, Curry1, HashMap, createHashMap, retrieve2 } from 'zrender/src/core/util';
 import {
     DataZoomPayloadBatchItem, collectReferCoordSysModelInfo,
     DataZoomCoordSysMainType, DataZoomReferCoordSysInfo
@@ -198,6 +198,8 @@ function mergeControllerParams(
         'type_undefined': -1
     };
     let preventDefaultMouseMove = true;
+    let cursorGrab: RoamOption['cursorGrab'];
+    let cursorGrabbing: RoamOption['cursorGrabbing'];
 
     dataZoomInfoMap.each(function (dataZoomInfo) {
         const dataZoomModel = dataZoomInfo.model;
@@ -214,6 +216,11 @@ function mergeControllerParams(
         // users may be confused why it does not work when multiple insideZooms exist.
         preventDefaultMouseMove = preventDefaultMouseMove
             && dataZoomModel.get('preventDefaultMouseMove', true);
+
+        // Intuitively, use the last declared setting in ec option when this axis is covered
+        // by multiple `dataZoom`s.
+        cursorGrab = retrieve2(dataZoomModel.get('cursorGrab', true), cursorGrab);
+        cursorGrabbing = retrieve2(dataZoomModel.get('cursorGrabbing', true), cursorGrabbing);
     });
 
     return {
@@ -234,6 +241,8 @@ function mergeControllerParams(
                 roamTrigger: null,
                 isInSelf: coordSysRecord.containsPoint
             },
+            cursorGrab,
+            cursorGrabbing,
         }
     };
 }

src/component/helper/RoamController.ts

@@ -53,6 +53,12 @@ export interface RoamOption {
      * If fixed the page when pan
      */
     preventDefaultMouseMove?: boolean
+
+    /**
+     * Cursor styles
+     */
+    cursorGrab?: string // 'grab' by default.
+    cursorGrabbing?: string // 'grabbing' by default.
 }
 type RoamSetting = Omit<Required<RoamOption>, 'zInfo'> & {
     zInfoParsed: {
@@ -174,6 +180,8 @@ class RoamController extends Eventful<RoamEventDefinition> {
                 preventDefaultMouseMove: true,
                 zInfoParsed,
                 triggerInfo,
+                cursorGrab: 'grab', // CSS cursor 'grab'
+                cursorGrabbing: 'grabbing', // CSS cursor 'grabbing'
             });
 
             if (controlType == null) {
@@ -257,7 +265,7 @@ class RoamController extends Eventful<RoamEventDefinition> {
         if (!target && this._checkPointer(e, x, y)) {
             // To indicate users that this area is draggable, otherwise users probably cannot kwown
             // that when hovering out of the shape but still inside the bounding rect.
-            return 'grab';
+            return this._opt.cursorGrab;
         }
         if (forReverse) {
             return target && (target as Displayable).cursor || 'default';
@@ -318,7 +326,7 @@ class RoamController extends Eventful<RoamEventDefinition> {
             return;
         }
 
-        zr.setCursorStyle('grabbing');
+        zr.setCursorStyle(this._opt.cursorGrabbing);
 
         const oldX = this._x;
         const oldY = this._y;