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:06 UTC
[echarts] 04/10: WIP(legend): use default style in series
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 bf2529e70ae7730a5d6b32898452749d4499d7f2
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Mar 9 13:27:08 2021 +0800
WIP(legend): use default style in series
---
src/chart/line/LineSeries.ts | 2 +-
src/chart/line/install.ts | 3 +-
src/component/legend/LegendView.ts | 117 ++++++++++++++++---------------------
src/data/List.ts | 2 +-
4 files changed, 52 insertions(+), 72 deletions(-)
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 5e969d9..5c9006d 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -153,7 +153,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
itemStyle: {
color: 'auto',
- borderWidth: 1
+ borderWidth: 2
},
endLabel: {
diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts
index 71d38ac..35147e2 100644
--- a/src/chart/line/install.ts
+++ b/src/chart/line/install.ts
@@ -43,9 +43,8 @@ export function install(registers: EChartsExtensionInstallRegisters) {
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;
+ let lineColor = lineStyle && lineStyle.get('color') || color;
- console.log(color, borderColor)
if (lineStyle) {
seriesModel.getData().setVisual('legendSymbolStyle', {
borderColor,
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 9627355..1fc9abf 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -203,6 +203,7 @@ 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,
@@ -216,16 +217,12 @@ class LegendView extends ComponentView {
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(
- dataIndex, itemModel, legendModel,
+ name, dataIndex, itemModel, legendModel,
legendSymbolType, symbolType, symbolSize,
- itemAlign, color, borderColor, borderWidth,
- legendSymbolStyle, decal, selectMode
+ itemAlign,
+ legendSymbolStyle, style, true, selectMode
);
itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -252,30 +249,13 @@ 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;
- 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.
- // Do not show nothing.
- if (colorArr && colorArr[3] === 0) {
- colorArr[3] = 0.2;
- // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
- color = stringify(colorArr, 'rgba');
- }
-
const legendSymbolType = 'roundRect';
const itemGroup = this._createItem(
- dataIndex, itemModel, legendModel,
+ name, dataIndex, itemModel, legendModel,
legendSymbolType, null, null,
- itemAlign, color, borderColor, borderWidth,
- {}, decal, selectMode
+ itemAlign,
+ {}, style, false, selectMode
);
// FIXME: consider different series has items with the same name.
@@ -347,6 +327,7 @@ class LegendView extends ComponentView {
}
private _createItem(
+ name: string,
dataIndex: number,
itemModel: LegendModel['_data'][number],
legendModel: LegendModel,
@@ -354,11 +335,9 @@ class LegendView extends ComponentView {
symbolType: string,
symbolSize: number | number[],
itemAlign: LegendOption['align'],
- color: ZRColor,
- borderColor: ZRColor,
- borderWidth: number,
legendSymbolStyle: LegendSymbolStyleOption,
- decal: PatternObject,
+ dataItemStyle: PathStyleProps,
+ isColorBySeries: boolean,
selectMode: LegendOption['selectedMode']
) {
if (symbolSize != null && typeof symbolSize === 'object') {
@@ -368,7 +347,6 @@ 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');
@@ -376,6 +354,23 @@ class LegendView extends ComponentView {
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
const legendModelItemStyle = itemModel.getModel('itemStyle');
+ let color = dataItemStyle.fill;
+ if (!isColorBySeries) {
+ const colorArr = parse(color as ColorString);
+ // Color may be set to transparent in visualMap when data is out of range.
+ // Do not show nothing.
+ if (colorArr && colorArr[3] === 0) {
+ colorArr[3] = 0.2;
+ // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
+ color = stringify(colorArr, 'rgba');
+ }
+ }
+
+ symbolType = symbolType || 'roundRect';
+ const borderColor = dataItemStyle[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
+ const borderWidth = dataItemStyle.lineWidth;
+ const decal = dataItemStyle.decal;
+
const itemGroup = new Group();
const textStyleModel = itemModel.getModel('textStyle');
@@ -392,27 +387,32 @@ class LegendView extends ComponentView {
// At least show one symbol, can't be all none
&& ((symbolType !== legendSymbolType) || symbolType === 'none');
+ // Draw line if hasHorizontalLine, else draw symbol
+ let legendBorderColor = isSelected
+ ? (hasHorizontalLine
+ ? legendSymbolStyle.horizontalLineColor
+ : borderColor
+ )
+ : inactiveBorderColor;
+ legendBorderColor = legendBorderColor === 'auto'
+ ? color : legendBorderColor;
+ const legendBorderWidth = hasHorizontalLine
+ ? (legendSymbolStyle.horizontalLineWidth == null
+ ? borderWidth
+ : legendSymbolStyle.horizontalLineWidth)
+ : borderWidth;
const legendSymbol = createSymbol(
legendSymbolType,
0,
0,
itemWidth,
itemHeight,
- isSelected ? (hasHorizontalLine ? 'none' : color) : inactiveColor,
+ legendBorderColor,
// 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,
- legendBorderColor, legendBorderWidth,
- inactiveBorderColor, decal, isSelected
- )
+ setSymbolStyle(legendSymbol, legendSymbolType, null, legendBorderWidth, decal)
);
// Draw symbol if hasHorizontalLine
@@ -435,10 +435,7 @@ class LegendView extends ComponentView {
);
// Put symbol in the center
itemGroup.add(
- setSymbolStyle(
- legendSymbolCenter, symbolType, legendModelItemStyle,
- borderColor, borderWidth, inactiveBorderColor, decal, isSelected
- )
+ setSymbolStyle(legendSymbolCenter, symbolType, borderColor, borderWidth, decal)
);
}
@@ -589,35 +586,19 @@ class LegendView extends ComponentView {
function setSymbolStyle(
symbol: graphic.Path | graphic.Image,
symbolType: string,
- legendModelItemStyle: Model<ItemStyleOption>,
borderColor: ZRColor,
borderWidth: number,
- inactiveBorderColor: ZRColor,
- decal: PatternObject,
- isSelected: boolean
+ decal: PatternObject
) {
- const itemStyle = legendModelItemStyle.getItemStyle([
- 'color', 'borderColor', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY'
- ]);
- (symbol as Displayable).setStyle(itemStyle);
-
const style = (symbol as graphic.Path).style;
- let color = style.fill;
- if (symbolType === 'line' || symbolType.indexOf('empty') > -1) {
- // Use color as borderColor
- borderColor = isSelected
- ? legendModelItemStyle.get('color') || color
- : inactiveBorderColor;
- // color = 'none';
+ if (symbolType === 'line') {
+ style.stroke = style.fill;
+ style.fill = 'none';
}
else {
style.decal = decal;
- borderColor = isSelected
- ? legendModelItemStyle.get('borderColor') || borderColor
- : inactiveBorderColor;
+ borderColor && (style.stroke = borderColor);
}
- style.fill = color;
- style.stroke = borderColor;
style.lineWidth = borderWidth;
return symbol;
}
diff --git a/src/data/List.ts b/src/data/List.ts
index 951c463..dec8228 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,
+ DecalObject
} from '../util/types';
import {isDataItemOption, convertOptionIdName} from '../util/model';
import { getECData } from '../util/innerStore';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org