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

…#8964
apache · May 1, 2020 · d42f5cf · d42f5cf
1 parent 79919e7
commit d42f5cf
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/component/toolbox/feature/DataZoom.js b/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,16 +240,30 @@ function updateZoomBtnStatus(featureModel, ecModel, view, payload, api) {
             zoomActive
             ? {
                 brushType: 'auto',
-                brushStyle: {
-                    // FIXME user customized?
-                    lineWidth: 0,
-                    fill: 'rgba(0,0,0,0.2)'
-                }
+                brushStyle: mapBrushStyle(featureModel.option.brushStyle)
             }
             : false
         );
 }
 
+function mapBrushStyle(brushStyle) {
+    var properties = [
+        ['fill', 'color'],
+        ['lineWidth', 'borderWidth'],
+        ['stroke', 'borderColor'],
+        ['opacity', 'opacity']
+    ];
+    var style = {};
+    for (var i = 0; i < properties.length; i++) {
+        var propName = properties[i][1];
+        var val = brushStyle[propName];
+        if (val != null) {
+            style[properties[i][0]] = val;
+        }
+    }
+    return style;
+}
+
 
 featureManager.register('dataZoom', DataZoom);
 

diff --git a/test/dataZoom-toolbox.html b/test/dataZoom-toolbox.html
@@ -145,7 +145,13 @@ <h2>Specify Y axis (yAxisIndex: false, should be 'lineX' brush)</h2>
                         dataView: {},
                         dataZoom: {
                             show: true,
-                            yAxisIndex: null
+                            yAxisIndex: null,
+                            // brushStyle: {
+                            //     borderWidth: 2,
+                            //     color: 'blue',
+                            //     opacity: 0.1,
+                            //     borderColor: '#596A76',
+                            // }
                         },
                         restore: {show: true},
                         saveAsImage: {}