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:12 UTC
[echarts] 10/10: WIP(legend): fix symbolSize
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 aa7f802f1d8e61898ace7348e7825b74b3524364
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Mar 17 18:08:14 2021 +0800
WIP(legend): fix symbolSize
---
src/component/legend/LegendModel.ts | 4 +--
src/component/legend/LegendView.ts | 59 +++++++++++++++++++------------------
2 files changed, 33 insertions(+), 30 deletions(-)
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 3b561d9..0ccded5 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -72,7 +72,7 @@ export interface LegendItemStyleOption {
shadowOffsetX?: number | 'inherit'
shadowOffsetY?: number | 'inherit'
borderColor?: ZRColor | 'inherit'
- borderWidth?: number | 'inherit'
+ borderWidth?: number | 'inherit' | 'auto'
borderType?: ZRLineType | 'inherit'
borderCap?: CanvasLineCap | 'inherit'
borderJoin?: CanvasLineJoin | 'inherit'
@@ -468,7 +468,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
shadowOffsetX: 'inherit',
shadowOffsetY: 'inherit',
borderColor: 'inherit',
- borderWidth: 'inherit',
+ borderWidth: 'auto',
borderCap: 'inherit',
borderJoin: 'inherit',
borderDashOffset: 'inherit',
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index ff643af..54b24bd 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -336,66 +336,62 @@ class LegendView extends ComponentView {
itemModel: LegendModel['_data'][number],
legendModel: LegendModel,
legendSymbolType: string,
- symbolType: string,
- symbolSize: number | number[],
+ dataSymbolType: string,
+ dataSymbolSize: number | number[],
itemAlign: LegendOption['align'],
lineVisualStyle: LineStyleProps,
itemVisualStyle: PathStyleProps,
isColorBySeries: boolean,
selectMode: LegendOption['selectedMode']
) {
- if (symbolSize != null && typeof symbolSize === 'object') {
- // Use symbol height as symbol size if it's an array
- symbolSize = symbolSize[1];
- }
-
const itemWidth = legendModel.get('itemWidth');
const itemHeight = legendModel.get('itemHeight');
const isSelected = legendModel.isSelected(name);
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
+ const itemIcon = itemModel.get('icon');
+ let symbolSize;
const legendSymbolSize = itemModel.get('symbolSize');
if (legendSymbolSize === 'auto') {
- // auto: 80% itemHeight
- symbolSize = itemHeight * 0.8;
+ // auto: 80% itemHeight if has line, 100% elsewise
+ const hasHorizontalLine = !itemIcon && dataSymbolType
+ && ((dataSymbolType !== legendSymbolType) || dataSymbolType === 'none');
+ symbolSize = hasHorizontalLine
+ ? itemHeight * 0.8
+ : [itemWidth, itemHeight];
}
- else if (legendSymbolSize !== 'inherit') {
+ else if (legendSymbolSize !== 'inherit') {
// number: legend.symbolSize
- symbolSize = Math.min(legendSymbolSize, itemHeight);
+ symbolSize = legendSymbolSize;
+ }
+ else {
+ // inherit: series.symbolSize
+ symbolSize = dataSymbolSize;
}
// inherit: series.symbolSize, which is passed in by function parameter
const legendLineStyle = legendModel.getModel('lineStyle');
const style = getLegendStyle(itemModel, legendLineStyle, lineVisualStyle, itemVisualStyle, isColorBySeries, isSelected);
- symbolType = symbolType || 'roundRect';
+ dataSymbolType = dataSymbolType || 'roundRect';
const itemGroup = new Group();
const textStyleModel = itemModel.getModel('textStyle');
- const itemIcon = itemModel.get('icon');
-
-
// 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');
-
// Draw line
if (legendSymbolType === 'line' || itemIcon === 'line') {
itemGroup.add(
createHorizontalLine(itemWidth, itemHeight, style.lineStyle)
)
}
-
// Put symbol in the center
if (itemIcon !== 'line') {
itemGroup.add(
- createItem(symbolType, symbolSize, symbolKeepAspect, itemWidth, itemHeight, style.itemStyle)
+ createItem(dataSymbolType, symbolSize, symbolKeepAspect, itemWidth, itemHeight, style.itemStyle)
);
}
@@ -579,6 +575,10 @@ function getLegendStyle(
if (value === 'inherit') {
(itemStyle as any)[visualName] = itemVisualStyle[visualName];
}
+ else if (value === 'auto' && visualName === 'lineWidth') {
+ // If lineStyle.width is 'auto', it is set to be 2 if series has border
+ itemStyle.lineWidth = itemVisualStyle.lineWidth > 0 ? 2 : 0;
+ }
else {
(itemStyle as any)[visualName] = value;
}
@@ -652,14 +652,17 @@ function createItem(
symbolType = 'circle';
}
const size = symbolSize == null
- ? itemHeight
- : Math.min(itemHeight, symbolSize as number);
+ ? [itemHeight, itemHeight]
+ : (typeof symbolSize === 'object'
+ ? [Math.min(itemWidth, symbolSize[0]), Math.min(itemHeight, symbolSize[1])]
+ : [Math.min(itemHeight, symbolSize as number), Math.min(itemHeight, symbolSize as number)]
+ );
const symbol = createSymbol(
symbolType,
- (itemWidth - size) / 2,
- (itemHeight - size) / 2,
- size,
- size,
+ (itemWidth - size[0]) / 2,
+ (itemHeight - size[1]) / 2,
+ size[0],
+ size[1],
style.fill,
// symbolKeepAspect default true for legend
symbolKeepAspect == null ? true : symbolKeepAspect
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org