fix(legend): no rotation when icon is defined

src/chart/custom/install.ts

@@ -327,7 +327,7 @@ const NON_STYLE_VISUAL_PROPS = {
     symbol: 1,
     symbolSize: 1,
     symbolKeepAspect: 1,
-    legendSymbol: 1,
+    legendIcon: 1,
     visualMeta: 1,
     liftZ: 1,
     decal: 1

src/chart/map/MapSeries.ts

@@ -242,12 +242,6 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
         // Map do not use itemStyle.borderWidth as border width
         symbol.style.stroke = 'none';
 
-        const symbolRotate = opt.symbolRotate === 'inherit'
-            ? 0
-            : (opt.symbolRotate || 0);
-        symbol.rotation = symbolRotate * Math.PI / 180;
-        symbol.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
-
         if (symbolType.indexOf('empty') > -1) {
             symbol.style.stroke = symbol.style.fill;
             symbol.style.fill = '#fff';

src/chart/map/mapSymbolLayout.ts

@@ -66,7 +66,7 @@ export default function mapSymbolLayout(ecModel: GlobalModel) {
             }
         });
 
-        // Show label of those region not has legendSymbol(which is offset 0)
+        // Show label of those region not has legendIcon (which is offset 0)
         const data = mapSeries.getData();
         data.each(function (idx) {
             const name = data.getName(idx);

src/component/helper/MapDraw.ts

@@ -682,7 +682,7 @@ function resetLabelForRegion(
     // In the following cases label will be drawn
     // 1. In map series and data value is NaN
     // 2. In geo component
-    // 3. Region has no series legendSymbol, which will be add a showLabel flag in mapSymbolLayout
+    // 3. Region has no series legendIcon, which will be add a showLabel flag in mapSymbolLayout
     if (
         ((isGeo || isDataNaN))
         || (itemLayout && itemLayout.showLabel)

src/component/legend/LegendView.ts

@@ -207,7 +207,7 @@ class LegendView extends ComponentView {
             if (seriesModel) {
                 const data = seriesModel.getData();
                 const lineVisualStyle = data.getVisual('legendLineStyle') || {};
-                const symbolType = data.getVisual('legendSymbol');
+                const legendIcon = data.getVisual('legendIcon');
 
                 /**
                  * `data.getVisual('style')` may be the color from the register
@@ -218,7 +218,7 @@ class LegendView extends ComponentView {
                 const itemGroup = this._createItem(
                     seriesModel, name, dataIndex,
                     legendItemModel, legendModel, itemAlign,
-                    lineVisualStyle, style, symbolType, selectMode
+                    lineVisualStyle, style, legendIcon, selectMode
                 );
 
                 itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -245,7 +245,7 @@ class LegendView extends ComponentView {
                         const idx = provider.indexOfName(name);
 
                         const style = provider.getItemVisual(idx, 'style') as PathStyleProps;
-                        const symbolType = provider.getItemVisual(idx, 'legendSymbol');
+                        const legendIcon = provider.getItemVisual(idx, 'legendIcon');
 
                         const colorArr = parse(style.fill as ColorString);
                         // Color may be set to transparent in visualMap when data is out of range.
@@ -259,7 +259,7 @@ class LegendView extends ComponentView {
                         const itemGroup = this._createItem(
                             seriesModel, name, dataIndex,
                             legendItemModel, legendModel, itemAlign,
-                            {}, style, symbolType, selectMode
+                            {}, style, legendIcon, selectMode
                         );
 
                         // FIXME: consider different series has items with the same name.
@@ -339,7 +339,7 @@ class LegendView extends ComponentView {
         itemAlign: LegendOption['align'],
         lineVisualStyle: LineStyleProps,
         itemVisualStyle: PathStyleProps,
-        symbolType: string,
+        legendIcon: string,
         selectMode: LegendOption['selectedMode']
     ) {
         const drawType = seriesModel.visualDrawType;
@@ -350,11 +350,11 @@ class LegendView extends ComponentView {
         let symbolRotate = itemModel.get('symbolRotate');
 
         const legendIconType = itemModel.get('icon');
-        symbolType = legendIconType || symbolType || 'roundRect';
+        legendIcon = legendIconType || legendIcon || 'roundRect';
 
         const legendLineStyle = legendModel.getModel('lineStyle');
         const style = getLegendStyle(
-            symbolType,
+            legendIcon,
             itemModel,
             legendLineStyle,
             lineVisualStyle,
@@ -374,7 +374,7 @@ class LegendView extends ComponentView {
             itemGroup.add(seriesModel.getLegendIcon({
                 itemWidth,
                 itemHeight,
-                symbolType,
+                symbolType: legendIcon,
                 symbolRotate,
                 itemStyle: style.itemStyle,
                 lineStyle: style.lineStyle
@@ -382,13 +382,15 @@ class LegendView extends ComponentView {
         }
         else {
             // Use default legend icon policy for most series
-            const rotate = symbolRotate === 'inherit'
+            const rotate = legendIconType === 'inherit' && legendIcon
+                ? (symbolRotate === 'inherit'
                     ? seriesModel.get('symbolRotate')
-                : symbolRotate;
+                    : symbolRotate)
+                : 0; // No rotation for no icon
             itemGroup.add(getDefaultLegendIcon({
                 itemWidth,
                 itemHeight,
-                symbolType,
+                symbolType: legendIcon,
                 symbolRotate: rotate,
                 itemStyle: style.itemStyle,
                 lineStyle: style.lineStyle

src/component/radar/install.ts

@@ -34,10 +34,10 @@ export function install(registers: EChartsExtensionInstallRegisters) {
             const data = seriesModel.getData();
             // itemVisual symbol is for selected data
             data.each(function (idx) {
-                data.setItemVisual(idx, 'legendSymbol', 'roundRect');
+                data.setItemVisual(idx, 'legendIcon', 'roundRect');
             });
             // visual is for unselected data
-            data.setVisual('legendSymbol', 'roundRect');
+            data.setVisual('legendIcon', 'roundRect');
         }
     });
 }

src/data/List.ts

@@ -141,7 +141,7 @@ export interface DefaultDataVisual {
 
     liftZ?: number
     // For legend.
-    legendSymbol?: string
+    legendIcon?: string
     legendLineStyle?: LineStyleProps
 
     // visualMap will inject visualMeta data

src/model/Series.ts

@@ -175,7 +175,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
     // Default symbol type.
     defaultSymbol: string;
     // Symbol provide to legend.
-    legendSymbol: string;
+    legendIcon: string;
 
     // ---------------------------------------
     // Props about data selection

src/visual/symbol.ts

@@ -46,8 +46,8 @@ const seriesSymbolTask: StageHandler = {
     ) {
         const data = seriesModel.getData();
 
-        if (seriesModel.legendSymbol) {
-            data.setVisual('legendSymbol', seriesModel.legendSymbol);
+        if (seriesModel.legendIcon) {
+            data.setVisual('legendIcon', seriesModel.legendIcon);
         }
 
         if (!seriesModel.hasSymbolVisual) {
@@ -74,7 +74,7 @@ const seriesSymbolTask: StageHandler = {
         const seriesSymbolOffset = !hasSymbolOffsetCallback ? symbolOffset : null;
 
         data.setVisual({
-            legendSymbol: seriesModel.legendSymbol || seriesSymbol as string,
+            legendIcon: seriesModel.legendIcon || seriesSymbol as string,
             // If seting callback functions on `symbol` or `symbolSize`, for simplicity and avoiding
             // to bring trouble, we do not pick a reuslt from one of its calling on data item here,
             // but just use the default value. Callback on `symbol` or `symbolSize` is convenient in

test/legend-style.html

@@ -230,7 +230,8 @@ under the License.
                             name: 'Line C',
                             symbolRotate: -30,
                             icon: 'emptyTriangle'
-                        }
+                        },
+                        'Bar D'
                     ],
                     symbolRotate: 30,
                     itemWidth: 100
@@ -254,6 +255,10 @@ under the License.
                     name: 'Line C',
                     symbol: 'emptyTriangle',
                     symbolKeepAspect: true
+                }, {
+                    data: getData(0),
+                    type: 'bar',
+                    name: 'Bar D'
                 }],
                 animation: 0
             };
@@ -263,7 +268,8 @@ under the License.
                     '**Legend options should work**',
                     'Line A: the rect in the legend should be placed at the center with rotation of 30 degrees',
                     'Line B: the triangle in the legend should be placed at the center with rotation of 30 degrees',
-                    'Line C: the triangle in the legend should be placed at the center with rotation of -30 degrees'
+                    'Line C: should not have rotate in legend',
+                    'Bar D: should not have rotate in legend'
                 ],
                 option: option
             });