Merge pull request #12550 from zhiyuc123/customBrushStyle

feat(dataZoom): custom brush style in toolbox.feature.dataZoom

src/component/toolbox/feature/DataZoom.js

@@ -61,7 +61,11 @@ DataZoom.defaultOption = {
         back: 'M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26'
     },
     // `zoom`, `back`
-    title: zrUtil.clone(dataZoomLang.title)
+    title: zrUtil.clone(dataZoomLang.title),
+    brushStyle: {
+        borderWidth: 0,
+        color: 'rgba(0,0,0,0.2)'
+    }
 };
 
 var proto = DataZoom.prototype;
@@ -236,11 +240,7 @@ function updateZoomBtnStatus(featureModel, ecModel, view, payload, api) {
             zoomActive
             ? {
                 brushType: 'auto',
-                brushStyle: {
-                    // FIXME user customized?
-                    lineWidth: 0,
-                    fill: 'rgba(0,0,0,0.2)'
-                }
+                brushStyle: featureModel.getModel('brushStyle').getItemStyle()
             }
             : false
         );

test/dataZoom-toolbox.html

@@ -145,7 +145,13 @@ under the License.
                         dataView: {},
                         dataZoom: {
                             show: true,
-                            yAxisIndex: null
+                            yAxisIndex: null,
+                            // brushStyle: {
+                            //     borderWidth: 2,
+                            //     color: 'blue',
+                            //     opacity: 0.1,
+                            //     borderColor: '#596A76',
+                            // }
                         },
                         restore: {show: true},
                         saveAsImage: {}