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 3646296961ce1e1279e18297a294bca8849f10e1 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Wed Mar 17 15:52:38 2021 +0800 WIP(legend): style when series is not selected --- src/chart/line/install.ts | 6 +----- src/component/legend/LegendModel.ts | 4 ++++ src/component/legend/LegendView.ts | 25 ++++++++++++++++--------- src/data/List.ts | 4 ++-- 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts index b5dd22f..c493d97 100644 --- a/src/chart/line/install.ts +++ b/src/chart/line/install.ts @@ -42,15 +42,11 @@ export function install(registers: EChartsExtensionInstallRegisters) { const lineStyle = seriesModel.getModel('lineStyle').getLineStyle(); const itemStyle = seriesModel.getModel('itemStyle').getItemStyle(); const color = itemStyle && itemStyle.fill; - console.log(itemStyle, lineStyle); if (lineStyle) { lineStyle.stroke = lineStyle.stroke || color; } - seriesModel.getData().setVisual('legendSymbolStyle', { - itemStyle, - lineStyle - }); + seriesModel.getData().setVisual('legendLineStyle', lineStyle); } }); diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts index c9997cd..3b561d9 100644 --- a/src/component/legend/LegendModel.ts +++ b/src/component/legend/LegendModel.ts @@ -93,6 +93,8 @@ export interface LegendLineStyleOption { shadowColor?: ColorString | 'inherit' shadowOffsetX?: number | 'inherit' shadowOffsetY?: number | 'inherit' + inactiveColor?: ColorString, + inactiveWidth?: number } export interface LegendStyleOption { @@ -476,6 +478,8 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode lineStyle: { width: 'auto', color: 'inherit', + inactiveColor: '#ccc', + inactiveWidth: 2, opacity: 'inherit', type: 'inherit', cap: 'inherit', diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts index 6f37e72..c4374fe 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, { LegendItemStyleOption, LegendLineStyleOption, LegendOption, LegendSelectorButtonOption, LegendStyleOption, LegendSymbolStyleOption, LegendTooltipFormatterParams } from './LegendModel'; +import LegendModel, { LegendItemStyleOption, LegendLineStyleOption, LegendOption, LegendSelectorButtonOption, LegendTooltipFormatterParams } from './LegendModel'; import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../core/ExtensionAPI'; import { @@ -208,14 +208,13 @@ class LegendView extends ComponentView { // Legend to control series. if (seriesModel) { const data = seriesModel.getData(); - const lineVisualStyle = (data.getVisual('legendSymbolStyle') || {}).lineStyle; + const lineVisualStyle = data.getVisual('legendLineStyle') || {}; /** * `data.getVisual('style')` may be the color from the register * in series. For example, for line series, */ const style = data.getVisual('style'); - console.log(style, lineVisualStyle); // Using rect symbol defaultly const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect'; @@ -223,7 +222,6 @@ class LegendView extends ComponentView { const symbolSize = data.getVisual('symbolSize'); data.getVisual('symbolSize'); - console.log(symbolSize) const itemGroup = this._createItem( name, dataIndex, legendItemModel, legendModel, @@ -356,14 +354,12 @@ class LegendView extends ComponentView { const itemHeight = legendModel.get('itemHeight'); const isSelected = legendModel.isSelected(name); - const inactiveColor = itemModel.get('inactiveColor'); - const inactiveBorderColor = itemModel.get('inactiveBorderColor'); const symbolKeepAspect = itemModel.get('symbolKeepAspect'); const legendSymbolSize = itemModel.get('symbolSize'); if (legendSymbolSize === 'auto') { // auto: 80% itemHeight - symbolSize = itemHeight * 0.8; + symbolSize = itemHeight * 0.8; } else if (legendSymbolSize !== 'inherit') { // number: legend.symbolSize @@ -371,7 +367,8 @@ class LegendView extends ComponentView { } // inherit: series.symbolSize, which is passed in by function parameter - const style = getLegendStyle(itemModel, lineVisualStyle, itemVisualStyle, isColorBySeries); + const legendLineStyle = legendModel.getModel('lineStyle'); + const style = getLegendStyle(itemModel, legendLineStyle, lineVisualStyle, itemVisualStyle, isColorBySeries, isSelected); symbolType = symbolType || 'roundRect'; @@ -417,6 +414,7 @@ class LegendView extends ComponentView { content = formatter(name); } + const inactiveColor = itemModel.get('inactiveColor'); itemGroup.add(new graphic.Text({ style: createTextStyle(textStyleModel, { text: content, @@ -551,9 +549,11 @@ class LegendView extends ComponentView { function getLegendStyle( legendModel: LegendModel['_data'][number], + legendLineStyle: Model<LegendLineStyleOption>, lineVisualStyle: LineStyleProps, itemVisualStyle: PathStyleProps, - isColorBySeries: boolean + isColorBySeries: boolean, + isSelected: boolean ) { let color = itemVisualStyle.fill; if (!isColorBySeries) { @@ -622,6 +622,13 @@ function getLegendStyle( (itemStyle.stroke === 'auto') && (itemStyle.stroke = color); (lineStyle.stroke === 'auto') && (lineStyle.stroke = color); + if (!isSelected) { + itemStyle.fill = legendModel.get('inactiveColor'); + itemStyle.stroke = legendModel.get('inactiveBorderColor'); + lineStyle.stroke = legendLineStyle.get('inactiveColor'); + lineStyle.lineWidth = legendLineStyle.get('inactiveWidth'); + } + return { itemStyle, lineStyle }; } diff --git a/src/data/List.ts b/src/data/List.ts index dec8228..7dd0cf4 100644 --- a/src/data/List.ts +++ b/src/data/List.ts @@ -46,7 +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'; +import { LineStyleProps } from '../model/mixin/lineStyle'; const mathFloor = Math.floor; const isObject = zrUtil.isObject; @@ -141,7 +141,7 @@ export interface DefaultDataVisual { liftZ?: number // For legend. legendSymbol?: string - legendSymbolStyle?: LegendSymbolStyleOption + legendLineStyle?: LineStyleProps // visualMap will inject visualMeta data visualMeta?: VisualMeta[] --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org