Merge pull request #14243 from apache/feat-visualMap-itemSymbol

fix(visualMap): use itemSymbol as default symbol type and fix #5719

src/component/visualMap/PiecewiseModel.ts

@@ -244,6 +244,13 @@ class PiecewiseModel extends VisualMapModel<PiecewiseVisualMapOption> {
         // thisOption.selectedMode === 'multiple', default: all selected.
     }
 
+    /**
+     * @public
+     */
+    getItemSymbol(): string {
+        return this.get('itemSymbol');
+    }
+
     /**
      * @public
      */

src/component/visualMap/VisualMapModel.ts

@@ -236,6 +236,13 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
         );
     }
 
+    /**
+     * @public
+     */
+    getItemSymbol(): string {
+        return null;
+    }
+
     /**
      * @protected
      * @return {Array.<number>} An array of series indices.
@@ -483,6 +490,8 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
             const symbolSizeExists = (controller.inRange || {}).symbolSize
                 || (controller.outOfRange || {}).symbolSize;
             const inactiveColor = this.get('inactiveColor');
+            const itemSymbol = this.getItemSymbol();
+            const defaultSymbol = itemSymbol || 'roundRect';
 
             each(this.stateList, function (state: VisualState) {
 
@@ -501,7 +510,7 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
                 if (visuals.symbol == null) {
                     visuals.symbol = symbolExists
                         && zrUtil.clone(symbolExists)
-                        || (isCategory ? 'roundRect' : ['roundRect']);
+                        || (isCategory ? defaultSymbol : [defaultSymbol]);
                 }
                 if (visuals.symbolSize == null) {
                     visuals.symbolSize = symbolSizeExists
@@ -509,9 +518,9 @@ class VisualMapModel<Opts extends VisualMapOption = VisualMapOption> extends Com
                         || (isCategory ? itemSize[0] : [itemSize[0], itemSize[0]]);
                 }
 
-                // Filter square and none.
+                // Filter none
                 visuals.symbol = mapVisual(visuals.symbol, function (symbol) {
-                    return (symbol === 'none' || symbol === 'square') ? 'roundRect' : symbol;
+                    return symbol === 'none' ? defaultSymbol : symbol;
                 });
 
                 // Normalize symbolSize

src/component/visualMap/VisualMapView.ts

@@ -27,7 +27,6 @@ import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
 import VisualMapModel from './VisualMapModel';
 import { VisualOptionUnit, ColorString } from '../../util/types';
-import PiecewiseModel from './PiecewiseModel';
 
 type VisualState = VisualMapModel['stateList'][number];
 
@@ -117,9 +116,6 @@ class VisualMapView extends ComponentView {
         const visualObj: {[key in typeof visualCluster]?: VisualOptionUnit[key]} = {};
 
         // Default values.
-        if (visualCluster === 'symbol') {
-            visualObj.symbol = (visualMapModel as PiecewiseModel).get('itemSymbol');
-        }
         if (visualCluster === 'color') {
             const defaultColor = visualMapModel.get('contentColor');
             visualObj.color = defaultColor as ColorString;

test/visualMap-scatter-colorAndSymbol.html

@@ -86,7 +86,8 @@ under the License.
                             dimension: 3,
                             seriesIndex: 0,
                             max: 10,
-                            color: ['red', 'pink', 'black']
+                            color: ['red', 'pink', 'black'],
+                            itemSymbol: 'circle'
                         },
                         {
                             right: 0,
@@ -98,7 +99,8 @@ under the License.
                             backgroundColor: '#eee',
                             inRange: {
                                 symbol: ['rect', 'line', 'path://M 100 100 L 300 100 L 200 300 z']
-                            }
+                            },
+                            itemSymbol: 'diamond'
                         },
                         {
                             left: 'center',
@@ -116,9 +118,10 @@ under the License.
                                 {
                                     gte: 0,
                                     color: 'green',
-                                    symbol: 'rect'
+                                    // symbol: 'rect'
                                 }
-                            ]
+                            ],
+                            itemSymbol: 'circle'
                         }
                     ],
                     series: [