feat: legend.itemStyle has higher priority

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/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/LegendView.ts

@@ -44,8 +44,6 @@ 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';
-import {LineStyleMixin} from '../../model/mixin/lineStyle';
-import {LineDrawModelOption} from '../../chart/helper/LineDraw';
 
 const curry = zrUtil.curry;
 const each = zrUtil.each;
@@ -172,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) {
@@ -204,19 +203,24 @@ 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 = data.getVisual('legendSymbolStyle') || {};
+                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, symbolSize,
-                    itemAlign, color, borderColor, borderWidth,
+                    itemAlign, color, fillColor, borderColor, borderWidth,
                     legendSymbolStyle, selectMode
                 );
 
@@ -261,7 +265,7 @@ class LegendView extends ComponentView {
                         const itemGroup = this._createItem(
                             name, dataIndex, itemModel, legendModel,
                             legendSymbolType, null, null,
-                            itemAlign, color, borderColor, borderWidth,
+                            itemAlign, color, color, borderColor, borderWidth,
                             {}, selectMode
                         );
 
@@ -343,6 +347,7 @@ class LegendView extends ComponentView {
         symbolSize: number | number[],
         itemAlign: LegendOption['align'],
         color: ZRColor,
+        fillColor: ZRColor,
         borderColor: ZRColor,
         borderWidth: number,
         legendSymbolStyle: ItemStyleOption,
@@ -408,7 +413,7 @@ class LegendView extends ComponentView {
                 (itemHeight - size) / 2,
                 size,
                 size,
-                isSelected ? color : inactiveColor,
+                isSelected ? fillColor : inactiveColor,
                 // symbolKeepAspect default true for legend
                 symbolKeepAspect == null ? true : symbolKeepAspect
             );
@@ -575,17 +580,12 @@ function setSymbolStyle(
     isSelected: boolean
 ) {
     let itemStyle;
-    if (symbolType.indexOf('empty') < 0) {
-        itemStyle = legendModelItemStyle.getItemStyle();
-        itemStyle.lineWidth = borderWidth;
-        // itemStyle.
-        itemStyle.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/util/symbol.ts

@@ -26,11 +26,7 @@ import {calculateTextPosition} from 'zrender/src/contain/text';
 import { Dictionary } from 'zrender/src/core/types';
 import { ZRColor } from './types';
 
-type ECSymbol = graphic.Path & {
-    __isEmptyBrush?: boolean
-    setColor: (color: ZRColor, innerColor?: string) => void
-    getColor: () => ZRColor
-};
+type ECSymbol = graphic.Path;
 type SymbolCtor = { new(): ECSymbol };
 type SymbolShapeMaker = (x: number, y: number, w: number, h: number, shape: Dictionary<any>) => void;
 
@@ -304,21 +300,6 @@ const SymbolClz = graphic.Path.extend({
     }
 });
 
-// Provide setColor helper method to avoid determine if set the fill or stroke outside
-function symbolPathSetColor(this: ECSymbol, color: ZRColor, innerColor?: string) {
-    if (this.type !== 'image') {
-        const symbolStyle = this.style;
-        if (this.__isEmptyBrush) {
-            symbolStyle.stroke = color;
-            symbolStyle.fill = innerColor || '#fff';
-        }
-        else {
-            symbolStyle.fill = color;
-        }
-        this.markRedraw();
-    }
-}
-
 /**
  * Create a symbol element with given symbol configuration: shape, x, y, width, height, color
  */
@@ -342,7 +323,8 @@ export function createSymbol(
     }
     let symbolPath: ECSymbol | graphic.Image;
 
-    if (symbolType.indexOf('image://') === 0) {
+    const isImage = symbolType.indexOf('image://') === 0;
+    if (isImage) {
         symbolPath = graphic.makeImage(
             symbolType.slice(8),
             new BoundingRect(x, y, w, h),
@@ -369,13 +351,8 @@ export function createSymbol(
         }) as unknown as ECSymbol;
     }
 
-    (symbolPath as ECSymbol).__isEmptyBrush = isEmpty;
-
-    // TODO Should deprecate setColor
-    (symbolPath as ECSymbol).setColor = symbolPathSetColor;
-
-    if (color) {
-        (symbolPath as ECSymbol).setColor(color);
+    if (color && !isImage) {
+        (symbolPath as ECSymbol).style.fill = color;
     }
 
     return symbolPath as ECSymbol;

src/visual/style.ts

@@ -88,8 +88,14 @@ const seriesStyleTask: StageHandler = {
                 // TODO series count changed.
                 seriesModel.name, null, ecModel.getSeriesCount()
             );
+
             globalStyle.fill = globalStyle.fill === 'auto' ? colorPalette : globalStyle.fill;
             globalStyle.stroke = globalStyle.stroke === 'auto' ? colorPalette : globalStyle.stroke;
+
+            if (!globalStyle[colorKey]) {
+                globalStyle[colorKey] = colorPalette;
+            }
+
             data.setVisual('colorFromPalette', true);
         }
 

test/area-large.html

@@ -154,7 +154,7 @@ under the License.
                             sampling: 'average',
                             itemStyle: {
                                 normal: {
-                                    color: 'rgb(255, 70, 131)'
+                                    borderColor: 'rgb(255, 70, 131)'
                                 }
                             },
                             areaStyle: {

test/axes.html

@@ -493,10 +493,11 @@ under the License.
                         data: data1,
                         itemStyle: {
                             normal: {
-                                borderColor: 'white',
                                 borderWidth: 3,
-                                lineStyle: {width: 1}
                             }
+                        },
+                        lineStyle: {
+                            width: 1
                         }
                     }]
                 };
@@ -543,10 +544,11 @@ under the License.
                         data: data1,
                         itemStyle: {
                             normal: {
-                                borderColor: 'white',
                                 borderWidth: 3,
-                                lineStyle: {width: 1}
                             }
+                        },
+                        lineStyle: {
+                            width: 1
                         }
                     }]
                 };

test/axis-interval2.html

@@ -98,7 +98,6 @@ under the License.
 
                 var itemStyle = {
                     normal: {
-                        borderColor: 'white',
                         borderWidth: 3,
                         lineStyle: {
                             width: 1

test/legend-style.html

@@ -37,7 +37,8 @@ under the License.
 
 
         <div id="main1"></div>
-
+        <div id="main2"></div>
+<!--
         <script>
         require(['echarts'], function (echarts) {
             var getData = function (seriesId) {
@@ -62,7 +63,12 @@ under the License.
                 series: [{
                     data: getData(0),
                     type: 'line',
-                    name: 'Default Line'
+                    name: 'Default Line',
+                    emphasis: {
+                        itemStyle: {
+                            color: 'red'
+                        }
+                    }
                 }, {
                     data: getData(1),
                     type: 'line',
@@ -88,7 +94,7 @@ under the License.
                         symbolSize: 25
                     },
                     lineStyle: {
-                        color: 'red',
+                        color: 'auto',
                         width: 4
                     }
                 }, {
@@ -114,7 +120,12 @@ under the License.
                             color: 'blue'
                         }
                     }],
-                    center: ['80%', '50%']
+                    center: ['80%', '50%'],
+                    emphasis: {
+                        itemStyle: {
+                            color: 'red'
+                        }
+                    }
                 }],
                 grid: {
                     left: 60,
@@ -139,6 +150,123 @@ under the License.
                 option: option
             });
         });
+        </script> -->
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var getData = function (seriesId) {
+                var data = [];
+                for (var i = 0; i < 7; ++i) {
+                    data.push(Math.random() * 100 + (seriesId + 1) * 200);
+                }
+                return data;
+            };
+
+            var option = {
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                legend: {
+                    data: ['Default Line', 'Line with emptyCircle', 'Line with emptyCircle and color', 'Line with style', 'Line with visualMap', 'Pie A', 'Pie B', 'Pie C'],
+                    itemStyle: {
+                        borderWidth: 4
+                    }
+                },
+                series: [{
+                    data: getData(0),
+                    type: 'line',
+                    name: 'Default Line',
+                    emphasis: {
+                        itemStyle: {
+                            color: 'red'
+                        }
+                    }
+                }, {
+                    data: getData(1),
+                    type: 'line',
+                    name: 'Line with emptyCircle',
+                    symbol: 'emptyCircle'
+                }, {
+                    data: getData(2),
+                    type: 'line',
+                    name: 'Line with emptyCircle and color',
+                    symbol: 'emptyCircle',
+                    itemStyle: {
+                        color: 'auto'
+                    }
+                }, {
+                    data: getData(3),
+                    type: 'line',
+                    name: 'Line with style',
+                    symbolSize: 12,
+                    itemStyle: {
+                        color: 'auto',
+                        borderColor: 'blue',
+                        borderWidth: 2,
+                        symbolSize: 25
+                    },
+                    lineStyle: {
+                        color: 'auto',
+                        width: 4
+                    }
+                }, {
+                    data: getData(4),
+                    type: 'line',
+                    name: 'Line with visualMap',
+                    symbolSize: 30,
+                    itemStyle: {
+                        borderColor: 'green'
+                    }
+                }, {
+                    type: 'pie',
+                    data: [{
+                        name: 'Pie A',
+                        value: 10
+                    }, {
+                        name: 'Pie B',
+                        value: 8
+                    }, {
+                        name: 'Pie C',
+                        value: 14,
+                        itemStyle: {
+                            color: 'blue'
+                        }
+                    }],
+                    center: ['80%', '50%'],
+                    emphasis: {
+                        itemStyle: {
+                            color: 'red'
+                        }
+                    }
+                }],
+                grid: {
+                    left: 60,
+                    width: '55%'
+                },
+                visualMap: {
+                    type: 'continuous',
+                    min: 1000,
+                    max: 1100,
+                    inRange: {
+                        color: ['green', 'yellow', 'red']
+                    },
+                    show: false,
+                    seriesIndex: 4
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Styles of **legend** are prioritized',
+                    'All border width of the legend items should be 4'
+                ],
+                option: option
+            });
+        });
         </script>