WIP(legend): more intuitive legend design

src/chart/helper/EffectLine.ts

@@ -98,8 +98,6 @@ class EffectLine extends graphic.Group {
         symbol.scaleX = size[0];
         symbol.scaleY = size[1];
 
-        symbol.setColor(color);
-
         this._symbolType = symbolType;
         this._symbolScale = size;
 

src/chart/helper/LargeSymbolDraw.ts

@@ -68,8 +68,6 @@ class LargeSymbolPath extends graphic.Path<LargeSymbolPathProps> {
         return new LargeSymbolPathShape();
     }
 
-    setColor: ECSymbol['setColor'];
-
     buildPath(path: PathProxy | CanvasRenderingContext2D, shape: LargeSymbolPathShape) {
         const points = shape.points;
         const size = shape.size;
@@ -274,8 +272,6 @@ class LargeSymbolDraw {
         symbolEl.symbolProxy = createSymbol(
             data.getVisual('symbol'), 0, 0, 0, 0
         );
-        // Use symbolProxy setColor method
-        symbolEl.setColor = symbolEl.symbolProxy.setColor;
 
         const extrudeShadow = symbolEl.shape.size[0] < BOOST_SIZE_THRESHOLD;
         symbolEl.useStyle(
@@ -285,12 +281,6 @@ class LargeSymbolDraw {
             )
         );
 
-        const globalStyle = data.getVisual('style');
-        const visualColor = globalStyle && globalStyle.fill;
-        if (visualColor) {
-            symbolEl.setColor(visualColor);
-        }
-
         if (!isIncremental) {
             const ecData = getECData(symbolEl);
             // Enable tooltip

src/chart/helper/Line.ts

@@ -219,7 +219,7 @@ class Line extends graphic.Group {
             const symbol = this.childOfName(symbolCategory) as ECSymbol;
             if (symbol) {
                 // Share opacity and color with line.
-                symbol.setColor(visualColor);
+                symbol.style.fill = visualColor;
                 symbol.style.opacity = lineStyle.opacity;
 
                 for (let i = 0; i < SPECIAL_STATES.length; i++) {
@@ -230,7 +230,7 @@ class Line extends graphic.Group {
                         const state = symbol.ensureState(stateName);
                         const stateStyle = state.style || (state.style = {});
                         if (lineStateStyle.stroke != null) {
-                            stateStyle[symbol.__isEmptyBrush ? 'stroke' : 'fill'] = lineStateStyle.stroke;
+                            stateStyle.fill = lineStateStyle.stroke;
                         }
                         if (lineStateStyle.opacity != null) {
                             stateStyle.opacity = lineStateStyle.opacity;

src/chart/helper/Symbol.ts

@@ -272,18 +272,8 @@ class Symbol extends graphic.Group {
             }, symbolStyle));
         }
         else {
-            if (symbolPath.__isEmptyBrush) {
-                // fill and stroke will be swapped if it's empty.
-                // So we cloned a new style to avoid it affecting the original style in visual storage.
-                // TODO Better implementation. No empty logic!
-                symbolPath.useStyle(extend({}, symbolStyle));
-            }
-            else {
-                symbolPath.useStyle(symbolStyle);
-            }
-            symbolPath.setColor(visualColor, opts && opts.symbolInnerColor);
+            symbolPath.useStyle(symbolStyle);
             symbolPath.style.strokeNoScale = true;
-
         }
         const liftZ = data.getItemVisual(idx, 'liftZ');
         const z2Origin = this._z2;

src/chart/line.ts

@@ -27,9 +27,24 @@ import dataSample from '../processor/dataSample';
 
 // In case developer forget to include grid component
 import '../component/gridSimple';
+import LineSeriesModel from './line/LineSeries';
 
 echarts.registerLayout(layoutPoints('line'));
 
+echarts.registerVisual({
+    seriesType: 'line',
+    reset: function (seriesModel: LineSeriesModel) {
+        // Visual coding for legend
+        const lineStyle = seriesModel.getModel('lineStyle');
+        if (lineStyle) {
+            seriesModel.getData().setVisual('legendSymbolStyle', {
+                color: lineStyle.get('color'),
+                borderWidth: lineStyle.get('width')
+            });
+        }
+    }
+});
+
 // Down sample after filter
 echarts.registerProcessor(
     echarts.PRIORITY.PROCESSOR.STATISTIC,

src/chart/line/LineSeries.ts

@@ -36,6 +36,9 @@ import {
 import List from '../../data/List';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import type Polar from '../../coord/polar/Polar';
+import makeStyleMapper from '../../model/mixin/makeStyleMapper';
+import {ITEM_STYLE_KEY_MAP} from '../../model/mixin/itemStyle';
+import {LINE_STYLE_KEY_MAP} from '../../model/mixin/lineStyle';
 
 type LineDataValue = OptionDataValue | OptionDataValue[];
 
@@ -117,6 +120,8 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
     hasSymbolVisual = true;
     legendSymbol = 'line';
 
+    visualDrawType = 'stroke' as const;
+
     getInitialData(option: LineSeriesOption): List {
         if (__DEV__) {
             const coordSys = option.coordinateSystem;
@@ -141,6 +146,12 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
             position: 'top'
         },
 
+        itemStyle: {
+            color: 'white',
+            borderColor: 'auto',
+            borderWidth: 1
+        },
+
         lineStyle: {
             width: 2,
             type: 'solid'
@@ -165,7 +176,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         // Disabled if step is true
         smooth: false,
         smoothMonotone: null,
-        symbol: 'emptyCircle',
+        symbol: 'circle',
         symbolSize: 4,
         symbolRotate: null,
 

src/chart/line/LineView.ts

@@ -548,6 +548,10 @@ class LineView extends ChartView {
             }
         ));
 
+        if (polyline.style.stroke === 'auto') {
+            polyline.style.stroke = seriesModel.getColorFromPalette(name, null);
+        }
+
         setStatesStylesFromModel(polyline, seriesModel, 'lineStyle');
 
         const shouldBolderOnEmphasis = seriesModel.get(['emphasis', 'lineStyle', 'width']) === 'bolder';

src/chart/radar/RadarView.ts

@@ -237,7 +237,6 @@ class RadarView extends ChartView {
                 }
                 else {
                     symbolPath.useStyle(itemStyle);
-                    symbolPath.setColor(color);
                 }
 
                 const pathEmphasisState = symbolPath.ensureState('emphasis');

src/component/legend/LegendModel.ts

@@ -397,7 +397,6 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
         inactiveBorderColor: '#ccc',
 
         itemStyle: {
-            borderWidth: 0
         },
 
         textStyle: {

src/component/legend/LegendView.ts

@@ -35,12 +35,15 @@ import {
     ZRRectLike,
     ECElement,
     CommonTooltipOption,
-    ColorString
+    ColorString,
+    SeriesOption,
+    SymbolOptionMixin
 } from '../../util/types';
 import Model from '../../model/Model';
 import Displayable, { DisplayableState } from 'zrender/src/graphic/Displayable';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
 import { parse, stringify } from 'zrender/src/tool/color';
+import SeriesModel from '../../model/Series';
 
 const curry = zrUtil.curry;
 const each = zrUtil.each;
@@ -167,6 +170,7 @@ class LegendView extends ComponentView {
         const contentGroup = this.getContentGroup();
         const legendDrawnMap = zrUtil.createHashMap();
         const selectMode = legendModel.get('selectedMode');
+        const legendItemStyle = legendModel.get('itemStyle');
 
         const excludeSeriesId: string[] = [];
         ecModel.eachRawSeries(function (seriesModel) {
@@ -186,7 +190,8 @@ class LegendView extends ComponentView {
             }
 
             // Representitive series.
-            const seriesModel = ecModel.getSeriesByName(name)[0];
+            const seriesModel = ecModel.getSeriesByName(name)[0] as
+                SeriesModel<SeriesOption & SymbolOptionMixin>;
 
             if (legendDrawnMap.get(name)) {
                 // Have been drawed
@@ -198,17 +203,25 @@ class LegendView extends ComponentView {
                 const data = seriesModel.getData();
                 const style = data.getVisual('style');
                 const color = style[data.getVisual('drawType')] || style.fill;
+                const fillColor = style.fill;
                 const borderColor = style.stroke;
+                const borderWidth = style.lineWidth;
 
                 // Using rect symbol defaultly
                 const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
+                const legendSymbolStyle = zrUtil.defaults(
+                    data.getVisual('legendSymbolStyle'),
+                    legendItemStyle,
+                    true
+                );
                 const symbolType = data.getVisual('symbol');
+                const symbolSize = seriesModel.get('symbolSize');
 
                 const itemGroup = this._createItem(
                     name, dataIndex, itemModel, legendModel,
-                    legendSymbolType, symbolType,
-                    itemAlign, color, borderColor,
-                    selectMode
+                    legendSymbolType, symbolType, symbolSize,
+                    itemAlign, color, fillColor, borderColor, borderWidth,
+                    legendSymbolStyle, selectMode
                 );
 
                 itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -236,6 +249,7 @@ class LegendView extends ComponentView {
 
                         const style = provider.getItemVisual(idx, 'style') as PathStyleProps;
                         const borderColor = style.stroke;
+                        const borderWidth = style.lineWidth;
                         let color = style.fill;
                         const colorArr = parse(style.fill as ColorString);
                         // Color may be set to transparent in visualMap when data is out of range.
@@ -250,9 +264,9 @@ class LegendView extends ComponentView {
 
                         const itemGroup = this._createItem(
                             name, dataIndex, itemModel, legendModel,
-                            legendSymbolType, null,
-                            itemAlign, color, borderColor,
-                            selectMode
+                            legendSymbolType, null, null,
+                            itemAlign, color, color, borderColor, borderWidth,
+                            {}, selectMode
                         );
 
                         // FIXME: consider different series has items with the same name.
@@ -330,11 +344,20 @@ class LegendView extends ComponentView {
         legendModel: LegendModel,
         legendSymbolType: string,
         symbolType: string,
+        symbolSize: number | number[],
         itemAlign: LegendOption['align'],
         color: ZRColor,
+        fillColor: ZRColor,
         borderColor: ZRColor,
+        borderWidth: number,
+        legendSymbolStyle: ItemStyleOption,
         selectMode: LegendOption['selectedMode']
     ) {
+        if (symbolSize != null && typeof symbolSize === 'object') {
+            // Use symbol height as symbol size if it's an array
+            symbolSize = symbolSize[1];
+        }
+
         const itemWidth = legendModel.get('itemWidth');
         const itemHeight = legendModel.get('itemHeight');
         const inactiveColor = legendModel.get('inactiveColor');
@@ -367,7 +390,8 @@ class LegendView extends ComponentView {
         itemGroup.add(
             setSymbolStyle(
                 legendSymbol, legendSymbolType, legendModelItemStyle,
-                borderColor, inactiveBorderColor, isSelected
+                legendSymbolStyle.color || borderColor, legendSymbolStyle.borderWidth || borderWidth,
+                inactiveBorderColor, isSelected
             )
         );
 
@@ -377,7 +401,9 @@ class LegendView extends ComponentView {
             // At least show one symbol, can't be all none
             && ((symbolType !== legendSymbolType) || symbolType === 'none')
         ) {
-            const size = itemHeight * 0.8;
+            const size = symbolSize == null
+                ? itemHeight * 0.8
+                : Math.min(itemHeight, symbolSize as number);
             if (symbolType === 'none') {
                 symbolType = 'circle';
             }
@@ -387,15 +413,15 @@ class LegendView extends ComponentView {
                 (itemHeight - size) / 2,
                 size,
                 size,
-                isSelected ? color : inactiveColor,
+                isSelected ? fillColor : inactiveColor,
                 // symbolKeepAspect default true for legend
                 symbolKeepAspect == null ? true : symbolKeepAspect
             );
             // Put symbol in the center
             itemGroup.add(
                 setSymbolStyle(
                     legendSymbolCenter, symbolType, legendModelItemStyle,
-                    borderColor, inactiveBorderColor, isSelected
+                    borderColor, borderWidth, inactiveBorderColor, isSelected
                 )
             );
         }
@@ -549,19 +575,17 @@ function setSymbolStyle(
     symbolType: string,
     legendModelItemStyle: Model<ItemStyleOption>,
     borderColor: ZRColor,
+    borderWidth: number,
     inactiveBorderColor: ZRColor,
     isSelected: boolean
 ) {
     let itemStyle;
-    if (symbolType !== 'line' && symbolType.indexOf('empty') < 0) {
-        itemStyle = legendModelItemStyle.getItemStyle();
-        (symbol as graphic.Path).style.stroke = borderColor;
-        if (!isSelected) {
-            itemStyle.stroke = inactiveBorderColor;
-        }
-    }
-    else {
-        itemStyle = legendModelItemStyle.getItemStyle(['borderWidth', 'borderColor']);
+    itemStyle = legendModelItemStyle.getItemStyle();
+    itemStyle.lineWidth = borderWidth;
+    // itemStyle.
+    itemStyle.stroke = borderColor;
+    if (!isSelected) {
+        itemStyle.stroke = inactiveBorderColor;
     }
     (symbol as Displayable).setStyle(itemStyle);
     return symbol;

src/component/timeline/SliderTimelineView.ts

@@ -800,7 +800,6 @@ function giveSymbol(
         callback && callback.onCreate(symbol);
     }
     else {
-        symbol.setColor(color);
         group.add(symbol); // Group may be new, also need to add.
         callback && callback.onUpdate(symbol);
     }

src/data/List.ts

@@ -34,7 +34,7 @@ import Element from 'zrender/src/Element';
 import {
     DimensionIndex, DimensionName, DimensionLoose, OptionDataItem,
     ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput,
-    ModelOption, SeriesDataType, OrdinalRawValue
+    ModelOption, SeriesDataType, OrdinalRawValue, ItemStyleOption
 } from '../util/types';
 import {isDataItemOption, convertOptionIdName} from '../util/model';
 import { getECData } from '../util/ecData';
@@ -137,6 +137,7 @@ export interface DefaultDataVisual {
     liftZ?: number
     // For legend.
     legendSymbol?: string
+    legendSymbolStyle?: ItemStyleOption
 
     // visualMap will inject visualMeta data
     visualMeta?: VisualMeta[]