You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/03/17 10:10:09 UTC
[echarts] 07/10: WIP(legend): style when series is not selected
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 <zw...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org