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 1c93de638d8cbd5ddedd21059d99b831033a931f Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Thu Mar 4 12:26:46 2021 +0800 feat(legend): line series default legend and customed style --- src/component/legend/LegendModel.ts | 59 +++++++++++++++++++++---------------- src/component/legend/LegendView.ts | 42 +++++++++++++------------- src/export/option.ts | 12 ++++++-- src/util/symbol.ts | 3 +- 4 files changed, 64 insertions(+), 52 deletions(-) diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts index 074cb4e..afa39d4 100644 --- a/src/component/legend/LegendModel.ts +++ b/src/component/legend/LegendModel.ts @@ -59,7 +59,35 @@ export interface LegendSelectorButtonOption { title?: string } -interface DataItem { +export interface LegendStyleOption { + /** + * Icon of the legend items. + * @default 'roundRect' + */ + icon?: string + + /** + * Color when legend item is not selected + */ + inactiveColor?: ColorString + /** + * Border color when legend item is not selected + */ + inactiveBorderColor?: ColorString + + /** + * Legend label formatter + */ + formatter?: string | ((name: string) => string) + + itemStyle?: ItemStyleOption + + textStyle?: LabelOption + + symbolKeepAspect?: boolean +} + +interface DataItem extends LegendStyleOption { name?: string icon?: string textStyle?: LabelOption @@ -74,7 +102,10 @@ export interface LegendTooltipFormatterParams { name: string $vars: ['name'] } -export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, BorderOptionMixin { + +export interface LegendOption extends ComponentOption, LegendStyleOption, + BoxLayoutOptionMixin, BorderOptionMixin +{ mainType?: 'legend' @@ -98,11 +129,6 @@ export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, Bor */ padding?: number | number[] /** - * Icon of the legend items. - * @default 'roundRect' - */ - icon?: string - /** * Gap between each legend item. * @default 10 */ @@ -115,23 +141,6 @@ export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, Bor * Height of legend symbol */ itemHeight?: number - /** - * Color when legend item is not selected - */ - inactiveColor?: ColorString - /** - * Border color when legend item is not selected - */ - inactiveBorderColor?: ColorString - - itemStyle?: ItemStyleOption - - /** - * Legend label formatter - */ - formatter?: string | ((name: string) => string) - - textStyle?: LabelOption selectedMode?: boolean | 'single' | 'multiple' /** @@ -169,8 +178,6 @@ export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, Bor data?: (string | DataItem)[] - symbolKeepAspect?: boolean - /** * Tooltip option */ diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts index b170572..a1cab95 100644 --- a/src/component/legend/LegendView.ts +++ b/src/component/legend/LegendView.ts @@ -179,6 +179,7 @@ class LegendView extends ComponentView { each(legendModel.getData(), function (itemModel, dataIndex) { const name = itemModel.get('name'); + const legendItemStyle = itemModel.getModel('itemStyle').getItemStyle(); // Use empty string or \n as a newline string if (!this.newlineDisabled && (name === '' || name === '\n')) { @@ -201,15 +202,18 @@ class LegendView extends ComponentView { // Legend to control series. if (seriesModel) { const data = seriesModel.getData(); - const style = data.getVisual('style'); - const color = style[data.getVisual('drawType')] || style.fill; + const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {}; + 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 legendSymbolStyle = data.getVisual('legendSymbolStyle') || {}; const symbolType = data.getVisual('symbol'); const symbolSize = seriesModel.get('symbolSize'); @@ -357,12 +361,13 @@ class LegendView extends ComponentView { const itemWidth = legendModel.get('itemWidth'); const itemHeight = legendModel.get('itemHeight'); - const inactiveColor = legendModel.get('inactiveColor'); - const inactiveBorderColor = legendModel.get('inactiveBorderColor'); - const symbolKeepAspect = legendModel.get('symbolKeepAspect'); - const legendModelItemStyle = legendModel.getModel('itemStyle'); - const isSelected = legendModel.isSelected(name); + + const inactiveColor = itemModel.get('inactiveColor'); + const inactiveBorderColor = itemModel.get('inactiveBorderColor'); + const symbolKeepAspect = itemModel.get('symbolKeepAspect'); + const legendModelItemStyle = itemModel.getModel('itemStyle'); + const itemGroup = new Group(); const textStyleModel = itemModel.getModel('textStyle'); @@ -577,22 +582,15 @@ function setSymbolStyle( decal: PatternObject, isSelected: boolean ) { - let itemStyle; + const itemStyle = legendModelItemStyle.getItemStyle(); + (symbol as Displayable).setStyle(itemStyle); + + const style = (symbol as graphic.Path).style; if (symbolType.indexOf('empty') < 0) { - itemStyle = legendModelItemStyle.getItemStyle(); - itemStyle.lineWidth = borderWidth; - // itemStyle. - itemStyle.stroke = borderColor; - (symbol as graphic.Path).style.stroke = borderColor; - (symbol as graphic.Path).style.decal = decal; - if (!isSelected) { - itemStyle.stroke = inactiveBorderColor; - } + style.decal = decal; } - else { - itemStyle = legendModelItemStyle.getItemStyle(['borderWidth', 'borderColor']); - } - (symbol as Displayable).setStyle(itemStyle); + style.stroke = isSelected ? borderColor: inactiveBorderColor; + style.lineWidth = borderWidth; return symbol; } diff --git a/src/export/option.ts b/src/export/option.ts index 8ee454f..39ac46b 100644 --- a/src/export/option.ts +++ b/src/export/option.ts @@ -42,13 +42,19 @@ import type {TimelineOption as TimelineComponentOption} from '../component/timel import type {SliderTimelineOption as TimelineSliderComponentOption} from '../component/timeline/SliderTimelineModel'; import type {LegendOption as PlainLegendComponentOption} from '../component/legend/LegendModel'; -import type {ScrollableLegendOption as ScrollableLegendComponentOption} from '../component/legend/ScrollableLegendModel'; +import type { + ScrollableLegendOption as ScrollableLegendComponentOption +} from '../component/legend/ScrollableLegendModel'; import type {SliderDataZoomOption as SliderDataZoomComponentOption} from '../component/dataZoom/SliderZoomModel'; import type {InsideDataZoomOption as InsideDataZoomComponentOption} from '../component/dataZoom/InsideZoomModel'; -import type {ContinousVisualMapOption as ContinousVisualMapComponentOption} from '../component/visualMap/ContinuousModel'; -import type {PiecewiseVisualMapOption as PiecewiseVisualMapComponentOption} from '../component/visualMap/PiecewiseModel'; +import type { + ContinousVisualMapOption as ContinousVisualMapComponentOption +} from '../component/visualMap/ContinuousModel'; +import type { + PiecewiseVisualMapOption as PiecewiseVisualMapComponentOption +} from '../component/visualMap/PiecewiseModel'; import type {MarkLineOption as MarkLineComponentOption} from '../component/marker/MarkLineModel'; import type {MarkPointOption as MarkPointComponentOption} from '../component/marker/MarkPointModel'; diff --git a/src/util/symbol.ts b/src/util/symbol.ts index bd7c4e6..c30cf76 100644 --- a/src/util/symbol.ts +++ b/src/util/symbol.ts @@ -338,7 +338,8 @@ 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.`); + console.warn(`[DEPRECATED] Shape "${symbolType}" is deprecated. ` + + `Please use "${realSymbolType}" with "fill" as "white" instead.`); symbolType = realSymbolType; } let symbolPath: ECSymbol | graphic.Image; --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org