From 796b981b2dfe858cb46cb4b6be185a4f0efce166 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 16 Apr 2020 11:48:50 +0800 Subject: [PATCH 1/3] feat(legend): more intuitove legend design --- src/chart/line.ts | 16 +++ src/chart/line/LineSeries.ts | 13 ++- src/component/legend/LegendModel.ts | 2 +- src/component/legend/LegendView.ts | 50 +++++++--- src/data/List.ts | 3 +- src/util/symbol.ts | 24 ++--- src/visual/style.ts | 10 +- test/legend-style.html | 146 ++++++++++++++++++++++++++++ 8 files changed, 230 insertions(+), 34 deletions(-) create mode 100644 test/legend-style.html diff --git a/src/chart/line.ts b/src/chart/line.ts index 541b481e84..b70fd23e31 100644 --- a/src/chart/line.ts +++ b/src/chart/line.ts @@ -27,9 +27,25 @@ 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'); + console.log(lineStyle.get('color'), lineStyle.get('width')) + if (lineStyle) { + seriesModel.getData().setVisual('legendSymbolStyle', { + color: lineStyle.get('color'), + borderWidth: lineStyle.get('width') + }); + } + } +}); + // Down sample after filter echarts.registerProcessor( echarts.PRIORITY.PROCESSOR.STATISTIC, diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts index 1fcb7485cb..8383aadf72 100644 --- a/src/chart/line/LineSeries.ts +++ b/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[]; @@ -106,6 +109,8 @@ class LineSeriesModel extends SeriesModel { hasSymbolVisual = true; legendSymbol = 'line'; + visualDrawType = 'stroke' as const; + getInitialData(option: LineSeriesOption): List { if (__DEV__) { const coordSys = option.coordinateSystem; @@ -132,6 +137,12 @@ class LineSeriesModel extends SeriesModel { position: 'top' }, + itemStyle: { + color: 'white', + borderColor: 'auto', + borderWidth: 1 + }, + lineStyle: { width: 2, type: 'solid' @@ -149,7 +160,7 @@ class LineSeriesModel extends SeriesModel { // Disabled if step is true smooth: false, smoothMonotone: null, - symbol: 'emptyCircle', + symbol: 'circle', symbolSize: 4, symbolRotate: null, diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts index 290b7b348d..fa4298a252 100644 --- a/src/component/legend/LegendModel.ts +++ b/src/component/legend/LegendModel.ts @@ -391,7 +391,7 @@ class LegendModel extends ComponentMode inactiveBorderColor: '#ccc', itemStyle: { - borderWidth: 0 + // borderWidth: 0 }, textStyle: { diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts index dafa108d28..dbefd0e387 100644 --- a/src/component/legend/LegendView.ts +++ b/src/component/legend/LegendView.ts @@ -34,12 +34,17 @@ import { ZRRectLike, ECElement, CommonTooltipOption, - ColorString + ColorString, + SeriesOption, + SymbolOptionMixin } from '../../util/types'; import Model from '../../model/Model'; import Displayable 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; @@ -184,7 +189,8 @@ class LegendView extends ComponentView { } // Representitive series. - const seriesModel = ecModel.getSeriesByName(name)[0]; + const seriesModel = ecModel.getSeriesByName(name)[0] as + SeriesModel; if (legendDrawnMap.get(name)) { // Have been drawed @@ -197,16 +203,19 @@ class LegendView extends ComponentView { const style = data.getVisual('style'); const color = 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 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, borderColor, borderWidth, + legendSymbolStyle, selectMode ); itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId)) @@ -234,6 +243,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. @@ -248,9 +258,9 @@ class LegendView extends ComponentView { const itemGroup = this._createItem( name, dataIndex, itemModel, legendModel, - legendSymbolType, null, - itemAlign, color, borderColor, - selectMode + legendSymbolType, null, null, + itemAlign, color, borderColor, borderWidth, + {}, selectMode ); // FIXME: consider different series has items with the same name. @@ -328,11 +338,19 @@ class LegendView extends ComponentView { legendModel: LegendModel, legendSymbolType: string, symbolType: string, + symbolSize: number | number[], itemAlign: LegendOption['align'], color: 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'); @@ -365,7 +383,8 @@ class LegendView extends ComponentView { itemGroup.add( setSymbolStyle( legendSymbol, legendSymbolType, legendModelItemStyle, - borderColor, inactiveBorderColor, isSelected + legendSymbolStyle.color || borderColor, legendSymbolStyle.borderWidth || borderWidth, + inactiveBorderColor, isSelected ) ); @@ -375,7 +394,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'; } @@ -393,7 +414,7 @@ class LegendView extends ComponentView { itemGroup.add( setSymbolStyle( legendSymbolCenter, symbolType, legendModelItemStyle, - borderColor, inactiveBorderColor, isSelected + borderColor, borderWidth, inactiveBorderColor, isSelected ) ); } @@ -547,13 +568,16 @@ function setSymbolStyle( symbolType: string, legendModelItemStyle: Model, borderColor: ZRColor, + borderWidth: number, inactiveBorderColor: ZRColor, isSelected: boolean ) { let itemStyle; - if (symbolType !== 'line' && symbolType.indexOf('empty') < 0) { + if (symbolType.indexOf('empty') < 0) { itemStyle = legendModelItemStyle.getItemStyle(); - (symbol as graphic.Path).style.stroke = borderColor; + itemStyle.lineWidth = borderWidth; + // itemStyle. + itemStyle.stroke = borderColor; if (!isSelected) { itemStyle.stroke = inactiveBorderColor; } diff --git a/src/data/List.ts b/src/data/List.ts index 1a0c93bc6a..a8656b275d 100644 --- a/src/data/List.ts +++ b/src/data/List.ts @@ -35,7 +35,7 @@ import {ArrayLike, Dictionary, FunctionPropertyNames} from 'zrender/src/core/typ import Element from 'zrender/src/Element'; import { DimensionIndex, DimensionName, DimensionLoose, OptionDataItem, - ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput, ModelOption + ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput, ModelOption, ItemStyleOption, LineStyleOption } from '../util/types'; import {parseDate} from '../util/number'; import {isDataItemOption} from '../util/model'; @@ -136,6 +136,7 @@ export interface DefaultDataVisual { liftZ?: number // For legend. legendSymbol?: string + legendSymbolStyle?: ItemStyleOption // visualMap will inject visualMeta data visualMeta?: VisualMeta[] diff --git a/src/util/symbol.ts b/src/util/symbol.ts index a0bedde91f..64daf120b2 100644 --- a/src/util/symbol.ts +++ b/src/util/symbol.ts @@ -174,9 +174,7 @@ const Arrow = graphic.Path.extend({ */ // TODO Use function to build symbol path. const symbolCtors: Dictionary = { - // Use small height rect to simulate line. - // Avoid using stroke. - line: graphic.Rect as unknown as SymbolCtor, + line: graphic.Line as unknown as SymbolCtor, rect: graphic.Rect as unknown as SymbolCtor, @@ -195,17 +193,13 @@ const symbolCtors: Dictionary = { triangle: Triangle as unknown as SymbolCtor }; - -// NOTICE Only use fill. No line! const symbolShapeMakers: Dictionary = { - line: function (x, y, w, h, shape: graphic.Rect['shape']) { - const thickness = 2; - // A thin line - shape.x = x; - shape.y = y + h / 2 - thickness / 2; - shape.width = w; - shape.height = thickness; + line: function (x, y, w, h, shape: graphic.Line['shape']) { + shape.x1 = x; + shape.y1 = y + h / 2; + shape.x2 = x + w; + shape.y2 = y + h / 2; }, rect: function (x, y, w, h, shape: graphic.Rect['shape']) { @@ -317,8 +311,6 @@ function symbolPathSetColor(this: ECSymbol, color: ZRColor, innerColor?: string) if (this.__isEmptyBrush) { symbolStyle.stroke = color; symbolStyle.fill = innerColor || '#fff'; - // TODO Same width with lineStyle in LineView. - symbolStyle.lineWidth = 2; } else { symbolStyle.fill = color; @@ -344,7 +336,9 @@ export function createSymbol( const isEmpty = symbolType.indexOf('empty') === 0; if (isEmpty) { - symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6); + const realSymbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6); + console.warn(`[DEPRECATED] Shape "${symbolType}" is deprecated. Please use "${realSymbolType}" with "fill" as "white" instead.`); + symbolType = realSymbolType; } let symbolPath: ECSymbol | graphic.Image; diff --git a/src/visual/style.ts b/src/visual/style.ts index 78f2d56711..837d6a7502 100644 --- a/src/visual/style.ts +++ b/src/visual/style.ts @@ -18,7 +18,7 @@ */ import { isFunction, extend, createHashMap } from 'zrender/src/core/util'; -import { StageHandler, CallbackDataParams, ZRColor, Dictionary } from '../util/types'; +import { StageHandler, CallbackDataParams, ZRColor, Dictionary, SeriesOption, SymbolOptionMixin } from '../util/types'; import makeStyleMapper from '../model/mixin/makeStyleMapper'; import { ITEM_STYLE_KEY_MAP } from '../model/mixin/itemStyle'; import { LINE_STYLE_KEY_MAP } from '../model/mixin/lineStyle'; @@ -83,11 +83,15 @@ const seriesStyleTask: StageHandler = { // TODO style callback const colorCallback = isFunction(color) ? color as unknown as ColorCallback : null; // Default - if ((!globalStyle[colorKey] || colorCallback) && !seriesModel.useColorPaletteOnData) { - globalStyle[colorKey] = seriesModel.getColorFromPalette( + if ((!globalStyle[colorKey] || colorCallback || globalStyle.fill === 'auto' || globalStyle.stroke) + && !seriesModel.useColorPaletteOnData + ) { + var colorPalette = seriesModel.getColorFromPalette( // 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; } data.setVisual('style', globalStyle); diff --git a/test/legend-style.html b/test/legend-style.html new file mode 100644 index 0000000000..3022a5cb32 --- /dev/null +++ b/test/legend-style.html @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + +
+ + + + + + From 093d1a9082aa97997cdd8f81322ca1fd02be0c40 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 20 Apr 2020 13:25:54 +0800 Subject: [PATCH 2/3] WIP(legend) --- src/chart/line.ts | 1 - src/component/legend/LegendModel.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/chart/line.ts b/src/chart/line.ts index b70fd23e31..421a718142 100644 --- a/src/chart/line.ts +++ b/src/chart/line.ts @@ -36,7 +36,6 @@ echarts.registerVisual({ reset: function (seriesModel: LineSeriesModel) { // Visual coding for legend const lineStyle = seriesModel.getModel('lineStyle'); - console.log(lineStyle.get('color'), lineStyle.get('width')) if (lineStyle) { seriesModel.getData().setVisual('legendSymbolStyle', { color: lineStyle.get('color'), diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts index fa4298a252..bdb6f4ac47 100644 --- a/src/component/legend/LegendModel.ts +++ b/src/component/legend/LegendModel.ts @@ -391,7 +391,6 @@ class LegendModel extends ComponentMode inactiveBorderColor: '#ccc', itemStyle: { - // borderWidth: 0 }, textStyle: { From 7113d24a8225f13e896eaa48c9cf63d4655fa0d0 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 14 Sep 2020 11:49:43 +0800 Subject: [PATCH 3/3] feat: legend.itemStyle has higher priority --- src/chart/helper/EffectLine.ts | 2 - src/chart/helper/LargeSymbolDraw.ts | 10 -- src/chart/helper/Line.ts | 4 +- src/chart/helper/Symbol.ts | 12 +- src/chart/line/LineView.ts | 4 + src/chart/radar/RadarView.ts | 1 - src/component/legend/LegendView.ts | 34 ++--- src/component/timeline/SliderTimelineView.ts | 1 - src/util/symbol.ts | 33 +---- src/visual/style.ts | 6 + test/area-large.html | 2 +- test/axes.html | 10 +- test/axis-interval2.html | 1 - test/legend-style.html | 136 ++++++++++++++++++- 14 files changed, 174 insertions(+), 82 deletions(-) diff --git a/src/chart/helper/EffectLine.ts b/src/chart/helper/EffectLine.ts index d269faad9d..9cd76f0d97 100644 --- a/src/chart/helper/EffectLine.ts +++ b/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; diff --git a/src/chart/helper/LargeSymbolDraw.ts b/src/chart/helper/LargeSymbolDraw.ts index 381beea049..76d6b3fb20 100644 --- a/src/chart/helper/LargeSymbolDraw.ts +++ b/src/chart/helper/LargeSymbolDraw.ts @@ -68,8 +68,6 @@ class LargeSymbolPath extends graphic.Path { 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 diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts index dbc09c0350..3f0a2cd178 100644 --- a/src/chart/helper/Line.ts +++ b/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; diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index 0ddb15788f..7053b8ded0 100644 --- a/src/chart/helper/Symbol.ts +++ b/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; diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index 2c77752d3f..b38cf9aec5 100644 --- a/src/chart/line/LineView.ts +++ b/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'; diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts index dd266ece37..daa519f9cd 100644 --- a/src/chart/radar/RadarView.ts +++ b/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'); diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts index 88d16690e7..f9c25b335e 100644 --- a/src/component/legend/LegendView.ts +++ b/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; diff --git a/src/component/timeline/SliderTimelineView.ts b/src/component/timeline/SliderTimelineView.ts index e8688f8a7b..53d9b11193 100644 --- a/src/component/timeline/SliderTimelineView.ts +++ b/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); } diff --git a/src/util/symbol.ts b/src/util/symbol.ts index 4fe0c8b31f..8ce7a8abbb 100644 --- a/src/util/symbol.ts +++ b/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) => 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; diff --git a/src/visual/style.ts b/src/visual/style.ts index caa5d155c4..b380d42f82 100644 --- a/src/visual/style.ts +++ b/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); } diff --git a/test/area-large.html b/test/area-large.html index 152d1632c4..3212569420 100644 --- a/test/area-large.html +++ b/test/area-large.html @@ -154,7 +154,7 @@ sampling: 'average', itemStyle: { normal: { - color: 'rgb(255, 70, 131)' + borderColor: 'rgb(255, 70, 131)' } }, areaStyle: { diff --git a/test/axes.html b/test/axes.html index a379586d71..d4c688c731 100644 --- a/test/axes.html +++ b/test/axes.html @@ -493,10 +493,11 @@ data: data1, itemStyle: { normal: { - borderColor: 'white', borderWidth: 3, - lineStyle: {width: 1} } + }, + lineStyle: { + width: 1 } }] }; @@ -543,10 +544,11 @@ data: data1, itemStyle: { normal: { - borderColor: 'white', borderWidth: 3, - lineStyle: {width: 1} } + }, + lineStyle: { + width: 1 } }] }; diff --git a/test/axis-interval2.html b/test/axis-interval2.html index fef05b338b..f0c1659e78 100644 --- a/test/axis-interval2.html +++ b/test/axis-interval2.html @@ -98,7 +98,6 @@ var itemStyle = { normal: { - borderColor: 'white', borderWidth: 3, lineStyle: { width: 1 diff --git a/test/legend-style.html b/test/legend-style.html index 3022a5cb32..952b32ff33 100644 --- a/test/legend-style.html +++ b/test/legend-style.html @@ -37,7 +37,8 @@
- +
+ + +