You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/04 09:04:13 UTC
[incubator-echarts] branch label-enhancement updated: feat: change
label overlap configuration for supporting overlap layout
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new 65f4fc4 feat: change label overlap configuration for supporting overlap layout
65f4fc4 is described below
commit 65f4fc4570aae23ef76c20eb9c23cc6426786130
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Jun 4 17:03:30 2020 +0800
feat: change label overlap configuration for supporting overlap layout
---
src/chart/funnel/FunnelView.ts | 2 --
src/chart/pie/PieSeries.ts | 2 +-
src/chart/pie/PieView.ts | 2 --
src/label/LabelManager.ts | 26 +++++++++----------------
src/label/labelGuideHelper.ts | 3 +--
src/label/labelLayoutHelper.ts | 43 ++++++++++++++++++++++++++++++++++++++++++
src/util/types.ts | 14 ++++++++++----
test/label-layout.html | 14 +++++++-------
test/labelLine.html | 4 ++--
9 files changed, 73 insertions(+), 37 deletions(-)
diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index a93299e..e10efa0 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -157,8 +157,6 @@ class FunnelPiece extends graphic.Polygon {
}, {
// Default use item visual color
stroke: visualColor
- }, {
- autoCalculate: false
});
}
}
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 4b7fcc8..d2b3c18 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -283,7 +283,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
labelLayout: {
// Hide the overlapped label.
- overlap: 'hidden'
+ hideOverlap: true
},
// If use strategy to avoid label overlapping
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 54b73ba..2c6fe97 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -215,8 +215,6 @@ class PiePiece extends graphic.Sector {
}, {
stroke: visualColor,
opacity: style && style.opacity
- }, {
- autoCalculate: false
});
}
}
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index 523c48c..194c222 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -47,7 +47,7 @@ import Transformable from 'zrender/src/core/Transformable';
import { updateLabelLinePoints, setLabelLineStyle } from './labelGuideHelper';
import SeriesModel from '../model/Series';
import { makeInner } from '../util/model';
-import { retrieve2, each, keys } from 'zrender/src/core/util';
+import { retrieve2, each, keys, isFunction } from 'zrender/src/core/util';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import Model from '../model/Model';
@@ -69,9 +69,7 @@ interface LabelLayoutDesc {
dataType: string
layoutOption: LabelLayoutOptionCallback | LabelLayoutOption
-
- overlap: LabelLayoutOption['overlap']
- overlapMargin: LabelLayoutOption['overlapMargin']
+ computedLayoutOption: LabelLayoutOption
hostRect: RectLike
priority: number
@@ -204,12 +202,10 @@ class LabelManager {
dataType,
layoutOption,
+ computedLayoutOption: null,
hostRect,
- overlap: 'hidden',
- overlapMargin: 0,
-
// Label with lower priority will be hidden when overlapped
// Use rect size as default priority
priority: hostRect ? hostRect.width * hostRect.height : 0,
@@ -252,7 +248,7 @@ class LabelManager {
/**
* Ignore layouting if it's not specified anything.
*/
- if (!layoutOption || !keys(layoutOption).length) {
+ if (!(isFunction(layoutOption) || keys(layoutOption).length)) {
return;
}
@@ -298,6 +294,7 @@ class LabelManager {
}
layoutOption = layoutOption || {};
+ labelItem.computedLayoutOption = layoutOption;
if (hostEl) {
hostEl.setTextConfig({
@@ -339,9 +336,6 @@ class LabelManager {
label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]);
}
- labelItem.overlap = layoutOption.overlap;
- labelItem.overlapMargin = layoutOption.overlapMargin;
-
if (layoutOption.draggable) {
label.draggable = true;
label.cursor = 'move';
@@ -377,6 +371,7 @@ class LabelManager {
continue;
}
+ const layoutOption = labelItem.computedLayoutOption;
const label = labelItem.label;
const transform = label.getComputedTransform();
// NOTE: Get bounding rect after getComputedTransform, or label may not been updated by the host el.
@@ -388,8 +383,8 @@ class LabelManager {
let obb = isAxisAligned ? new OrientedBoundingRect(localRect, transform) : null;
let overlapped = false;
- const overlapMargin = labelItem.overlapMargin || 0;
- const marginSqr = overlapMargin * overlapMargin;
+ const minMargin = layoutOption.minMargin || 0;
+ const marginSqr = minMargin * minMargin;
for (let j = 0; j < displayedLabels.length; j++) {
const existsTextCfg = displayedLabels[j];
// Fast rejection.
@@ -418,10 +413,7 @@ class LabelManager {
const labelLine = labelItem.labelLine;
// TODO Callback to determine if this overlap should be handled?
- if (overlapped
- && labelItem.layoutOption
- && (labelItem.layoutOption as LabelLayoutOption).overlap === 'hidden'
- ) {
+ if (overlapped && layoutOption.hideOverlap) {
label.hide();
labelLine && labelLine.hide();
}
diff --git a/src/label/labelGuideHelper.ts b/src/label/labelGuideHelper.ts
index 3eee3bc..3ea413f 100644
--- a/src/label/labelGuideHelper.ts
+++ b/src/label/labelGuideHelper.ts
@@ -18,7 +18,6 @@
*/
import {
- Text as ZRText,
Point,
Path,
Polyline
@@ -28,7 +27,7 @@ import { RectLike } from 'zrender/src/core/BoundingRect';
import { normalizeRadian } from 'zrender/src/contain/util';
import { cubicProjectPoint, quadraticProjectPoint } from 'zrender/src/core/curve';
import Element from 'zrender/src/Element';
-import { extend, defaults, retrieve2 } from 'zrender/src/core/util';
+import { defaults, retrieve2 } from 'zrender/src/core/util';
import { LabelLineOption } from '../util/types';
import Model from '../model/Model';
import { invert } from 'zrender/src/core/matrix';
diff --git a/src/label/labelLayoutHelper.ts b/src/label/labelLayoutHelper.ts
new file mode 100644
index 0000000..c1df9b6
--- /dev/null
+++ b/src/label/labelLayoutHelper.ts
@@ -0,0 +1,43 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import ZRText from 'zrender/src/graphic/Text';
+
+
+/**
+ * Adjust labels on x direction to avoid overlap.
+ */
+export function adjustLayoutOnX(
+ list: ZRText[],
+ leftBound: number,
+ rightBound: number
+) {
+
+}
+
+/**
+ * Adjust labels on y direction to avoid overlap.
+ */
+export function adjustLayoutOnY(
+ list: ZRText[],
+ topBound: number,
+ bottomBound: number
+) {
+
+}
\ No newline at end of file
diff --git a/src/util/types.ts b/src/util/types.ts
index 617fb94..fc20b96 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -824,14 +824,20 @@ export interface LabelLayoutOptionCallbackParams {
export interface LabelLayoutOption {
/**
- * How to handle the element when it's overlapped
- * @default 'visible'
+ * If move the overlapped label. If label is still overlapped after moved.
+ * It will determine if to hide this label with `hideOverlap` policy.
*/
- overlap?: 'visible' | 'hidden' | 'blur'
+ moveOverlap?: 'x' | 'y' | boolean
+ /**
+ * If hide the overlapped label. It will be handled after move.
+ * @default 'none'
+ */
+ hideOverlap?: boolean
+
/**
* Minimal margin between two labels which will be considered as overlapped.
*/
- overlapMargin?: number
+ minMargin?: number
/**
* If label is draggable.
diff --git a/test/label-layout.html b/test/label-layout.html
index 5cc3f8b..a3eaf35 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -79,7 +79,7 @@ under the License.
show: true
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
data: [13244, 302, 301, 334, 390, 330, 320]
},
@@ -91,7 +91,7 @@ under the License.
show: true
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
data: [120, 132, 101, 134, 90, 230, 210]
},
@@ -103,7 +103,7 @@ under the License.
show: true
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
data: [220, 182, 191, 234, 290, 330, 310]
},
@@ -115,7 +115,7 @@ under the License.
show: true
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
data: [150, 212, 201, 154, 190, 330, 410]
},
@@ -127,7 +127,7 @@ under the License.
show: true
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
@@ -181,7 +181,7 @@ under the License.
position: 'top'
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
itemStyle: {
color: 'rgb(255, 70, 131)'
@@ -252,7 +252,7 @@ under the License.
},
labelLayout: {
- overlap: 'hidden'
+ hideOverlap: true
},
emphasis: {
diff --git a/test/labelLine.html b/test/labelLine.html
index 6cdae40..d02d1eb 100644
--- a/test/labelLine.html
+++ b/test/labelLine.html
@@ -69,7 +69,7 @@ under the License.
y: 20,
draggable: true,
align: 'center',
- overlap: 'hidden'
+ hideOverlap: true
},
labelLine: {
show: true,
@@ -93,7 +93,7 @@ under the License.
y: 40,
draggable: true,
align: 'center',
- overlap: 'hidden'
+ hideOverlap: true
},
labelLine: {
show: true,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org