WIP(legend): fix legendSymbol

src/chart/bar/install.ts

@@ -36,14 +36,6 @@ export function install(registers: EChartsExtensionInstallRegisters) {
     // only exist in this module, but probably also exist in other modules, like `barPolar`.
     registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, largeLayout);
 
-    registers.registerVisual({
-        seriesType: 'bar',
-        reset: function (seriesModel) {
-            // Visual coding for legend
-            seriesModel.getData().setVisual('legendSymbol', 'roundRect');
-        }
-    });
-
     // Down sample after filter
     registers.registerProcessor(
         registers.PRIORITY.PROCESSOR.STATISTIC,

src/chart/boxplot/boxplotVisual.ts

@@ -22,8 +22,5 @@ import ExtensionAPI from '../../core/ExtensionAPI';
 import BoxplotSeriesModel from './BoxplotSeries';
 
 export default function boxplotVisual(ecModel: GlobalModel, api: ExtensionAPI) {
-    ecModel.eachRawSeriesByType('boxplot', function (seriesModel: BoxplotSeriesModel) {
-        seriesModel.getData().setVisual('legendSymbol', 'roundRect');
-    });
 
 }
\ No newline at end of file

src/chart/candlestick/candlestickVisual.ts

@@ -53,8 +53,6 @@ const candlestickVisual: StageHandler = {
 
         const data = seriesModel.getData();
 
-        data.setVisual('legendSymbol', 'roundRect');
-
         // Only visible series has each data be visual encoded
         if (ecModel.isSeriesFiltered(seriesModel)) {
             return;

src/chart/line/LineSeries.ts

@@ -129,7 +129,6 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
     coordinateSystem: Cartesian2D | Polar;
 
     hasSymbolVisual = true;
-    legendSymbol = 'line';
 
     getInitialData(option: LineSeriesOption): List {
         if (__DEV__) {
@@ -240,9 +239,11 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         line.setStyle(opt.lineStyle);
 
         // Symbol in the center
+        const symbolType = opt.symbolType
+            || opt.series.getData().getVisual('symbol');
         const size = opt.itemHeight * 0.8;
         const symbol = createSymbol(
-            opt.symbolType,
+            symbolType,
             (opt.itemWidth - size) / 2,
             (opt.itemHeight - size) / 2,
             size,
@@ -254,7 +255,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
 
         symbol.setStyle(opt.itemStyle);
 
-        if (opt.symbolType.indexOf('empty') > -1) {
+        if (symbolType.indexOf('empty') > -1) {
             symbol.style.stroke = symbol.style.fill;
             symbol.style.fill = '#fff';
         }

src/component/legend/LegendView.ts

@@ -207,20 +207,11 @@ class LegendView extends ComponentView {
                  */
                 const style = data.getVisual('style');
 
-                // Using rect symbol defaultly
-                const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
-                const symbolType = data.getVisual('symbol');
-                const symbolSize = data.getVisual('symbolSize');
-
-                const drawType = seriesModel.visualDrawType;
-
                 data.getVisual('symbolSize');
 
                 const itemGroup = this._createItem(
-                    seriesModel, name, dataIndex, legendItemModel, legendModel,
-                    legendSymbolType, symbolType, symbolSize,
-                    itemAlign,
-                    lineVisualStyle, style, drawType, selectMode
+                    seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign,
+                    lineVisualStyle, style, selectMode
                 );
 
                 itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -257,14 +248,9 @@ class LegendView extends ComponentView {
                             style.fill = stringify(colorArr, 'rgba');
                         }
 
-                        const legendSymbolType = 'roundRect';
-                        const drawType = seriesModel.visualDrawType;
-
                         const itemGroup = this._createItem(
-                            seriesModel, name, dataIndex, legendItemModel, legendModel,
-                            legendSymbolType, null, null,
-                            itemAlign,
-                            {}, style, drawType, selectMode
+                            seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign,
+                            {}, style, selectMode
                         );
 
                         // FIXME: consider different series has items with the same name.
@@ -336,67 +322,58 @@ class LegendView extends ComponentView {
     }
 
     private _createItem(
-        seriesModel: SeriesModel,
+        seriesModel: SeriesModel<SeriesOption & SymbolOptionMixin>,
         name: string,
         dataIndex: number,
         itemModel: LegendModel['_data'][number],
         legendModel: LegendModel,
-        legendSymbolType: string,
-        dataSymbolType: string,
-        dataSymbolSize: number | number[],
         itemAlign: LegendOption['align'],
         lineVisualStyle: LineStyleProps,
         itemVisualStyle: PathStyleProps,
-        drawType: 'fill' | 'stroke',
         selectMode: LegendOption['selectedMode']
     ) {
+        const drawType = seriesModel.visualDrawType;
         const itemWidth = legendModel.get('itemWidth');
         const itemHeight = legendModel.get('itemHeight');
         const isSelected = legendModel.isSelected(name);
 
         const symbolKeepAspect = itemModel.get('symbolKeepAspect');
-        const itemIcon = itemModel.get('icon');
-
-        let symbolSize;
-        const legendSymbolSize = itemModel.get('symbolSize');
-        if (legendSymbolSize === 'auto') {
-            // auto: 80% itemHeight if has line, 100% elsewise
-            const hasHorizontalLine = !itemIcon && dataSymbolType
-                && ((dataSymbolType !== legendSymbolType) || dataSymbolType === 'none');
-            symbolSize = hasHorizontalLine
-                ? itemHeight * 0.8
-                : [itemWidth, itemHeight];
-        }
-        else if (legendSymbolSize !== 'inherit')  {
-            // number: legend.symbolSize
-            symbolSize = legendSymbolSize;
-        }
-        else {
-            // inherit: series.symbolSize
-            symbolSize = dataSymbolSize;
-        }
-
-        dataSymbolType = dataSymbolType || 'roundRect';
+        const data = seriesModel.getData();
+        const legendSymbolType = itemModel.get('icon')
+            || data.getVisual('legendSymbol');
+        const symbolType = legendSymbolType || 'roundRect';
 
         const legendLineStyle = legendModel.getModel('lineStyle');
-        const style = getLegendStyle(dataSymbolType, itemModel, legendLineStyle, lineVisualStyle, itemVisualStyle, drawType, isSelected);
+        const style = getLegendStyle(symbolType, itemModel, legendLineStyle, lineVisualStyle, itemVisualStyle, drawType, isSelected);
 
         const itemGroup = new Group();
 
         const textStyleModel = itemModel.getModel('textStyle');
 
-        const getLegendIcon = typeof seriesModel.getLegendIcon === 'function'
-            ? seriesModel.getLegendIcon
-            : getDefaultLegendIcon;
-        itemGroup.add(getLegendIcon({
-            series: seriesModel,
-            itemWidth,
-            itemHeight,
-            symbolType: dataSymbolType || 'roundRect',
-            symbolKeepAspect,
-            itemStyle: style.itemStyle,
-            lineStyle: style.lineStyle
-        }));
+        if (typeof seriesModel.getLegendIcon === 'function') {
+            // Series has specific way to define legend icon
+            itemGroup.add(seriesModel.getLegendIcon({
+                series: seriesModel,
+                itemWidth,
+                itemHeight,
+                symbolType: legendSymbolType,
+                symbolKeepAspect,
+                itemStyle: style.itemStyle,
+                lineStyle: style.lineStyle
+            }));
+        }
+        else {
+            // Use default legend icon policy for most series
+            itemGroup.add(getDefaultLegendIcon({
+                series: seriesModel,
+                itemWidth,
+                itemHeight,
+                symbolType: symbolType || 'roundRect',
+                symbolKeepAspect,
+                itemStyle: style.itemStyle,
+                lineStyle: style.lineStyle
+            }));
+        }
 
         const textX = itemAlign === 'left' ? itemWidth + 5 : -5;
         const textAlign = itemAlign as ZRTextAlign;
@@ -639,8 +616,9 @@ function getDefaultLegendIcon(opt: {
     itemStyle: PathStyleProps,
     lineStyle: LineStyleProps
 }): ECSymbol {
+    const symboType = opt.symbolType || 'roundRect';
     const symbol = createSymbol(
-        opt.symbolType,
+        symboType,
         0,
         0,
         opt.itemWidth,
@@ -651,7 +629,7 @@ function getDefaultLegendIcon(opt: {
 
     symbol.setStyle(opt.itemStyle);
 
-    if (opt.symbolType.indexOf('empty') > -1) {
+    if (symboType.indexOf('empty') > -1) {
         symbol.style.stroke = symbol.style.fill;
         symbol.style.fill = '#fff';
     }