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 db8297b feat(label): ignore style.x/y when x/y is given in labelLayout
db8297b is described below
commit db8297bf131fb7dc808e756865ede394e703f2e2
Author: pissang <[email protected]>
AuthorDate: Fri Apr 24 21:42:39 2020 +0800
feat(label): ignore style.x/y when x/y is given in labelLayout
---
src/util/LabelManager.ts | 66 ++++++++----
src/util/types.ts | 4 +-
test/{label-overlap.html => label-layout.html} | 137 +++++++++++++++++++++++--
3 files changed, 178 insertions(+), 29 deletions(-)
diff --git a/src/util/LabelManager.ts b/src/util/LabelManager.ts
index a91daca..23e09b7 100644
--- a/src/util/LabelManager.ts
+++ b/src/util/LabelManager.ts
@@ -64,10 +64,15 @@ interface SavedLabelAttr {
y: number
rotation: number
- align: ZRTextAlign
- verticalAlign: ZRTextVerticalAlign
- width: number
- height: number
+ style: {
+ align: ZRTextAlign
+ verticalAlign: ZRTextVerticalAlign
+ width: number
+ height: number
+
+ x: number
+ y: number
+ }
// Configuration in attached element
attachedPos: ElementTextConfig['position']
@@ -85,8 +90,8 @@ function prepareLayoutCallbackParams(labelItem:
LabelLayoutDesc): LabelLayoutOpt
text: labelItem.label.style.text,
rect: labelItem.hostRect,
labelRect: labelAttr.rect,
- x: labelAttr.x,
- y: labelAttr.y,
+ // x: labelAttr.x,
+ // y: labelAttr.y,
align: label.style.align,
verticalAlign: label.style.verticalAlign
};
@@ -163,10 +168,15 @@ class LabelManager {
rect: labelRect,
- align: labelStyle.align,
- verticalAlign: labelStyle.verticalAlign,
- width: labelStyle.width,
- height: labelStyle.height,
+ style: {
+ x: labelStyle.x,
+ y: labelStyle.y,
+
+ align: labelStyle.align,
+ verticalAlign: labelStyle.verticalAlign,
+ width: labelStyle.width,
+ height: labelStyle.height
+ },
attachedPos: textConfig.position,
attachedRot: textConfig.rotation
@@ -201,6 +211,7 @@ class LabelManager {
const hostEl = label.__hostTarget;
const defaultLabelAttr = labelItem.defaultAttr;
let layoutOption;
+ // TODO A global layout option?
if (typeof labelItem.layoutOption === 'function') {
layoutOption = labelItem.layoutOption(
prepareLayoutCallbackParams(labelItem)
@@ -221,21 +232,35 @@ class LabelManager {
offset: [layoutOption.dx || 0, layoutOption.dy || 0]
});
}
- label.x = layoutOption.x != null
- ? parsePercent(layoutOption.x, width)
- // Restore to default value if developers don't given a value.
- : defaultLabelAttr.x;
+ if (layoutOption.x != null) {
+ // TODO width of chart view.
+ label.x = parsePercent(layoutOption.x, width);
+ label.setStyle('x', 0); // Ignore movement in style.
+ }
+ else {
+ label.x = defaultLabelAttr.x;
+ label.setStyle('x', defaultLabelAttr.style.x);
+ }
- label.y = layoutOption.y != null
- ? parsePercent(layoutOption.y, height)
- : defaultLabelAttr.y;
+ if (layoutOption.y != null) {
+ // TODO height of chart view.
+ label.y = parsePercent(layoutOption.y, height);
+ label.setStyle('y', 0); // Ignore movement in style.
+ }
+ else {
+ label.y = defaultLabelAttr.y;
+ label.setStyle('y', defaultLabelAttr.style.y);
+ }
label.rotation = layoutOption.rotation != null
? layoutOption.rotation : defaultLabelAttr.rotation;
for (let k = 0; k < LABEL_OPTION_TO_STYLE_KEYS.length; k++) {
const key = LABEL_OPTION_TO_STYLE_KEYS[k];
- label.setStyle(key, layoutOption[key] != null ?
layoutOption[key] : defaultLabelAttr[key]);
+ label.setStyle(
+ key,
+ layoutOption[key] != null ? layoutOption[key] :
defaultLabelAttr.style[key]
+ );
}
labelItem.overlap = layoutOption.overlap;
@@ -250,12 +275,17 @@ class LabelManager {
const displayedLabels: DisplayedLabelItem[] = [];
const mvt = new Point();
+ // TODO, render overflow visible first, put in the displayedLabels.
labelList.sort(function (a, b) {
return b.priority - a.priority;
});
for (let i = 0; i < labelList.length; i++) {
const labelItem = labelList[i];
+ if (labelItem.defaultAttr.ignore) {
+ continue;
+ }
+
const label = labelItem.label;
const transform = label.getComputedTransform();
// NOTE: Get bounding rect after getComputedTransform, or label
may not been updated by the host el.
diff --git a/src/util/types.ts b/src/util/types.ts
index 47e0277..ea3c3b8 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -807,8 +807,8 @@ export interface LabelLayoutOptionCallbackParams {
verticalAlign: ZRTextVerticalAlign
rect: RectLike
labelRect: RectLike
- x: number
- y: number
+ // x: number
+ // y: number
};
export interface LabelLayoutOption {
diff --git a/test/label-overlap.html b/test/label-layout.html
similarity index 59%
rename from test/label-overlap.html
rename to test/label-layout.html
index 75de7c8..ac49bb1 100644
--- a/test/label-overlap.html
+++ b/test/label-layout.html
@@ -39,10 +39,13 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
+ <div id="main2"></div>
<!-- TODO: Tree, Sankey, Map -->
- <div id="main2"></div>
+ <div id="main3"></div>
+ <div id="main4"></div>
+ <div id="main5"></div>
@@ -126,6 +129,69 @@ under the License.
</script>
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ var base = +new Date(1968, 9, 3);
+ var oneDay = 24 * 3600 * 1000;
+ var date = [];
+
+ var data = [Math.round(Math.random() * 300)];
+
+ for (var i = 1; i < 200; i++) {
+ var now = new Date(base += oneDay);
+ date.push([now.getFullYear(), now.getMonth() + 1,
now.getDate()].join('/'));
+ data.push(Math.round((Math.random() - 0.5) * 20 + data[i -
1]));
+ }
+ option = {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: date
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%']
+ },
+ series: [
+ {
+ name:'large area',
+ type:'line',
+ smooth:true,
+ label: {
+ show: true,
+ position: 'top'
+ },
+ itemStyle: {
+ color: 'rgb(255, 70, 131)'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0,
0, 0, 1, [{
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ }, {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }])
+ },
+ data: data
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Overlap of line.'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+
<script>
require(['echarts', 'extension/dataTool'], function (echarts,
dataTool) {
@@ -167,12 +233,6 @@ under the License.
position: 'right'
},
- // labelLayout: function (params) {
- // return {
- // show: params.rect.width > 10,
- // overlap: 'hidden'
- // }
- // },
emphasis: {
label: {
show: true
@@ -191,7 +251,7 @@ under the License.
]
};
- var chart = testHelper.create(echarts, 'main1', {
+ var chart = testHelper.create(echarts, 'main2', {
title: [
'Hide overlap in graph zooming.'
],
@@ -200,7 +260,66 @@ under the License.
});
});
});
- </script>
+ </script>
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 10,
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ radius: ['50%', '70%'],
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '30',
+ fontWeight: 'bold'
+ }
+ },
+ labelLayout: {
+ x: '50%',
+ y: '50%',
+ align: 'center',
+ verticalAlign: 'center'
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 335, name: '直接访问'},
+ {value: 310, name: '邮件营销'},
+ {value: 234, name: '联盟广告'},
+ {value: 135, name: '视频广告'},
+ {value: 1548, name: '搜索引擎'}
+ ]
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Overlap of line.'
+ ],
+ option: option
+ });
+ });
+ </script>
+
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
