This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-legend in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 402f8f5627eba19d58ed5cccd21573d6f4aa1c7c Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Mon Mar 8 14:03:50 2021 +0800 WIP(legend): reserve emptyCircle --- src/chart/line/LineSeries.ts | 7 ++-- src/chart/line/install.ts | 12 +++++-- src/component/legend/LegendModel.ts | 8 ++++- src/component/legend/LegendView.ts | 68 ++++++++++++++++++++++++++----------- src/data/List.ts | 5 +-- src/util/symbol.ts | 5 +-- src/util/types.ts | 2 +- 7 files changed, 71 insertions(+), 36 deletions(-) diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts index 1876ab0..5e969d9 100644 --- a/src/chart/line/LineSeries.ts +++ b/src/chart/line/LineSeries.ts @@ -127,8 +127,6 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> { hasSymbolVisual = true; legendSymbol = 'line'; - visualDrawType = 'stroke' as const; - getInitialData(option: LineSeriesOption): List { if (__DEV__) { const coordSys = option.coordinateSystem; @@ -154,8 +152,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> { }, itemStyle: { - color: 'white', - borderColor: 'auto', + color: 'auto', borderWidth: 1 }, @@ -189,7 +186,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> { // Disabled if step is true smooth: false, smoothMonotone: null, - symbol: 'circle', + symbol: 'emptyCircle', symbolSize: 4, symbolRotate: null, diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts index 4738554..71d38ac 100644 --- a/src/chart/line/install.ts +++ b/src/chart/line/install.ts @@ -40,11 +40,17 @@ export function install(registers: EChartsExtensionInstallRegisters) { reset: function (seriesModel: LineSeriesModel) { // Visual coding for legend const lineStyle = seriesModel.getModel('lineStyle'); - console.log(lineStyle.get('color'), lineStyle.get('width')) + const itemStyle = seriesModel.getModel('itemStyle'); + const color = itemStyle ? itemStyle.get('color') : null; + const borderColor = itemStyle ? itemStyle.get('borderColor') : null;//TODO + const lineColor = lineStyle && lineStyle.get('color') || color; + + console.log(color, borderColor) if (lineStyle) { seriesModel.getData().setVisual('legendSymbolStyle', { - color: lineStyle.get('color'), - borderWidth: lineStyle.get('width') + borderColor, + horizontalLineColor: lineColor, + horizontalLineWidth: lineStyle.get('width') }); } } diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts index afa39d4..e603ce2 100644 --- a/src/component/legend/LegendModel.ts +++ b/src/component/legend/LegendModel.ts @@ -29,7 +29,8 @@ import { ItemStyleOption, LabelOption, LayoutOrient, - CommonTooltipOption + CommonTooltipOption, + ZRColor } from '../../util/types'; import { Dictionary } from 'zrender/src/core/types'; import GlobalModel from '../../model/Global'; @@ -103,6 +104,11 @@ export interface LegendTooltipFormatterParams { $vars: ['name'] } +export interface LegendSymbolStyleOption extends ItemStyleOption { + horizontalLineColor?: ZRColor, + horizontalLineWidth?: number +} + export interface LegendOption extends ComponentOption, LegendStyleOption, BoxLayoutOptionMixin, BorderOptionMixin { diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts index a1cab95..9627355 100644 --- a/src/component/legend/LegendView.ts +++ b/src/component/legend/LegendView.ts @@ -25,7 +25,7 @@ import {setLabelStyle, createTextStyle} from '../../label/labelStyle'; import {makeBackground} from '../helper/listComponent'; import * as layoutUtil from '../../util/layout'; import ComponentView from '../../view/Component'; -import LegendModel, { LegendOption, LegendSelectorButtonOption, LegendTooltipFormatterParams } from './LegendModel'; +import LegendModel, { LegendOption, LegendSelectorButtonOption, LegendSymbolStyleOption, LegendTooltipFormatterParams } from './LegendModel'; import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../core/ExtensionAPI'; import { @@ -203,22 +203,26 @@ class LegendView extends ComponentView { if (seriesModel) { const data = seriesModel.getData(); const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {}; + /** + * `data.getVisual('style')` may be the color from the register + * in series. For example, for line series, + */ const style = zrUtil.extend( zrUtil.extend({}, data.getVisual('style')), legendItemStyle ); - const color = style.fill; - const borderColor = style.stroke; - const borderWidth = style.lineWidth; - const decal = style.decal; // Using rect symbol defaultly const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect'; const symbolType = data.getVisual('symbol'); const symbolSize = seriesModel.get('symbolSize'); + const color = style.fill; + const borderColor = style[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke']; + const borderWidth = style.lineWidth; + const decal = style.decal; const itemGroup = this._createItem( - name, dataIndex, itemModel, legendModel, + dataIndex, itemModel, legendModel, legendSymbolType, symbolType, symbolSize, itemAlign, color, borderColor, borderWidth, legendSymbolStyle, decal, selectMode @@ -248,6 +252,10 @@ class LegendView extends ComponentView { const idx = provider.indexOfName(name); const style = provider.getItemVisual(idx, 'style') as PathStyleProps; + const symbolType = provider.getItemVisual(idx, 'symbolType'); + console.log(symbolType) + // TODO: + // const borderColor = style[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke']; const borderColor = style.stroke; const borderWidth = style.lineWidth; const decal = style.decal; @@ -264,7 +272,7 @@ class LegendView extends ComponentView { const legendSymbolType = 'roundRect'; const itemGroup = this._createItem( - name, dataIndex, itemModel, legendModel, + dataIndex, itemModel, legendModel, legendSymbolType, null, null, itemAlign, color, borderColor, borderWidth, {}, decal, selectMode @@ -339,7 +347,6 @@ class LegendView extends ComponentView { } private _createItem( - name: string, dataIndex: number, itemModel: LegendModel['_data'][number], legendModel: LegendModel, @@ -350,7 +357,7 @@ class LegendView extends ComponentView { color: ZRColor, borderColor: ZRColor, borderWidth: number, - legendSymbolStyle: ItemStyleOption, + legendSymbolStyle: LegendSymbolStyleOption, decal: PatternObject, selectMode: LegendOption['selectedMode'] ) { @@ -361,6 +368,7 @@ class LegendView extends ComponentView { const itemWidth = legendModel.get('itemWidth'); const itemHeight = legendModel.get('itemHeight'); + const name = itemModel.get('name'); const isSelected = legendModel.isSelected(name); const inactiveColor = itemModel.get('inactiveColor'); @@ -379,30 +387,36 @@ class LegendView extends ComponentView { // Use user given icon first legendSymbolType = itemIcon || legendSymbolType; + + const hasHorizontalLine = !itemIcon && symbolType + // At least show one symbol, can't be all none + && ((symbolType !== legendSymbolType) || symbolType === 'none'); + const legendSymbol = createSymbol( legendSymbolType, 0, 0, itemWidth, itemHeight, - isSelected ? color : inactiveColor, + isSelected ? (hasHorizontalLine ? 'none' : color) : inactiveColor, // symbolKeepAspect default true for legend symbolKeepAspect == null ? true : symbolKeepAspect ); + // Draw line if hasHorizontalLine, else draw symbol + const legendBorderColor = hasHorizontalLine ? legendSymbolStyle.horizontalLineColor : borderColor; + const legendBorderWidth = hasHorizontalLine + ? (legendSymbolStyle.horizontalLineWidth == null ? borderWidth : legendSymbolStyle.horizontalLineWidth) + : borderWidth; itemGroup.add( setSymbolStyle( legendSymbol, legendSymbolType, legendModelItemStyle, - legendSymbolStyle.color || borderColor, legendSymbolStyle.borderWidth || borderWidth, + legendBorderColor, legendBorderWidth, inactiveBorderColor, decal, isSelected ) ); - // Compose symbols - // PENDING - if (!itemIcon && symbolType - // At least show one symbol, can't be all none - && ((symbolType !== legendSymbolType) || symbolType === 'none') - ) { + // Draw symbol if hasHorizontalLine + if (hasHorizontalLine) { const size = symbolSize == null ? itemHeight * 0.8 : Math.min(itemHeight, symbolSize as number); @@ -582,14 +596,28 @@ function setSymbolStyle( decal: PatternObject, isSelected: boolean ) { - const itemStyle = legendModelItemStyle.getItemStyle(); + const itemStyle = legendModelItemStyle.getItemStyle([ + 'color', 'borderColor', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY' + ]); (symbol as Displayable).setStyle(itemStyle); const style = (symbol as graphic.Path).style; - if (symbolType.indexOf('empty') < 0) { + let color = style.fill; + if (symbolType === 'line' || symbolType.indexOf('empty') > -1) { + // Use color as borderColor + borderColor = isSelected + ? legendModelItemStyle.get('color') || color + : inactiveBorderColor; + // color = 'none'; + } + else { style.decal = decal; + borderColor = isSelected + ? legendModelItemStyle.get('borderColor') || borderColor + : inactiveBorderColor; } - style.stroke = isSelected ? borderColor: inactiveBorderColor; + style.fill = color; + style.stroke = borderColor; style.lineWidth = borderWidth; return symbol; } diff --git a/src/data/List.ts b/src/data/List.ts index 72f79dc..951c463 100644 --- a/src/data/List.ts +++ b/src/data/List.ts @@ -36,7 +36,7 @@ import { DimensionIndex, DimensionName, DimensionLoose, OptionDataItem, ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput, ModelOption, SeriesDataType, OptionSourceData, SOURCE_FORMAT_TYPED_ARRAY, SOURCE_FORMAT_ORIGINAL, - DecalObject, ItemStyleOption + DecalObject, } from '../util/types'; import {isDataItemOption, convertOptionIdName} from '../util/model'; import { getECData } from '../util/innerStore'; @@ -46,6 +46,7 @@ import type { VisualMeta } from '../component/visualMap/VisualMapModel'; import { parseDataValue } from './helper/dataValueHelper'; import {isSourceInstance, Source} from './Source'; import OrdinalMeta from './OrdinalMeta'; +import { LegendSymbolStyleOption } from './../component/legend/LegendModel'; const mathFloor = Math.floor; const isObject = zrUtil.isObject; @@ -140,7 +141,7 @@ export interface DefaultDataVisual { liftZ?: number // For legend. legendSymbol?: string - legendSymbolStyle?: ItemStyleOption + legendSymbolStyle?: LegendSymbolStyleOption // visualMap will inject visualMeta data visualMeta?: VisualMeta[] diff --git a/src/util/symbol.ts b/src/util/symbol.ts index c30cf76..8ec49ad 100644 --- a/src/util/symbol.ts +++ b/src/util/symbol.ts @@ -337,10 +337,7 @@ export function createSymbol( const isEmpty = symbolType.indexOf('empty') === 0; if (isEmpty) { - 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; + symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6); } let symbolPath: ECSymbol | graphic.Image; diff --git a/src/util/types.ts b/src/util/types.ts index 823310c..a8459a9 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -835,7 +835,7 @@ export interface ShadowOptionMixin { } export interface BorderOptionMixin { - borderColor?: string + borderColor?: ZRColor borderWidth?: number borderType?: ZRLineType borderCap?: CanvasLineCap --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org