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/07/03 07:05:31 UTC
[incubator-echarts] branch label-enhancement updated:
refact(label): add minMargin for layouting. the original margin is renamed
to edgeDistance
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 bf6c144 refact(label): add minMargin for layouting. the original margin is renamed to edgeDistance
bf6c144 is described below
commit bf6c1441bc31ff17ff7443e36ea8bacb14072edc
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Jul 3 15:04:03 2020 +0800
refact(label): add minMargin for layouting. the original margin is renamed to edgeDistance
The new add config is minMargin instead of margin is for not breaking the previous code using margin.
---
src/chart/pie/PieSeries.ts | 4 ++--
src/chart/pie/labelLayout.ts | 27 ++++++++++++++-------------
src/label/LabelManager.ts | 2 +-
src/label/labelLayoutHelper.ts | 3 +--
src/preprocessor/backwardCompat.ts | 22 +++++++++++++++++++++-
src/util/graphic.ts | 4 ++++
src/util/types.ts | 12 ++++++------
test/label-layout.html | 10 +++++-----
test/pie-alignTo.html | 18 +++++++++---------
test/pie-label-mobile.html | 4 ++--
10 files changed, 65 insertions(+), 41 deletions(-)
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 439a5bd..e3e877c 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -44,7 +44,7 @@ import List from '../../data/List';
interface PieLabelOption extends Omit<LabelOption, 'rotate' | 'position'> {
rotate?: number
alignTo?: 'none' | 'labelLine' | 'edge'
- margin?: string | number
+ edgeDistance?: string | number
bleedMargin?: number
distanceToLabelLine?: number
@@ -255,7 +255,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
alignTo: 'none',
// Closest distance between label and chart edge.
// Works only position is 'outer' and alignTo is 'edge'.
- margin: '25%',
+ edgeDistance: '25%',
// Works only position is 'outer' and alignTo is not 'edge'.
bleedMargin: 10,
// Distance between text and label line.
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 14b8c3b..ed77887 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -42,7 +42,7 @@ interface LabelLayout {
textAlign: HorizontalAlign
labelDistance: number,
labelAlignTo: PieSeriesOption['label']['alignTo'],
- labelMargin: number,
+ edgeDistance: number,
bleedMargin: PieSeriesOption['label']['bleedMargin'],
rect: BoundingRect
}
@@ -178,10 +178,10 @@ function avoidOverlap(
if (isAlignToEdge) {
if (label.x < cx) {
targetTextWidth = linePoints[2][0] - layout.labelDistance
- - viewLeft - layout.labelMargin;
+ - viewLeft - layout.edgeDistance;
}
else {
- targetTextWidth = viewLeft + viewWidth - layout.labelMargin
+ targetTextWidth = viewLeft + viewWidth - layout.edgeDistance
- linePoints[2][0] - layout.labelDistance;
}
}
@@ -206,10 +206,10 @@ function avoidOverlap(
const dist = linePoints[1][0] - linePoints[2][0];
if (isAlignToEdge) {
if (label.x < cx) {
- linePoints[2][0] = viewLeft + layout.labelMargin + realTextWidth + layout.labelDistance;
+ linePoints[2][0] = viewLeft + layout.edgeDistance + realTextWidth + layout.labelDistance;
}
else {
- linePoints[2][0] = viewLeft + viewWidth - layout.labelMargin
+ linePoints[2][0] = viewLeft + viewWidth - layout.edgeDistance
- realTextWidth - layout.labelDistance;
}
}
@@ -265,7 +265,7 @@ export default function (
const labelPosition = labelModel.get('position') || itemModel.get(['emphasis', 'label', 'position']);
const labelDistance = labelModel.get('distanceToLabelLine');
const labelAlignTo = labelModel.get('alignTo');
- const labelMargin = parsePercent(labelModel.get('margin'), viewWidth);
+ const edgeDistance = parsePercent(labelModel.get('edgeDistance'), viewWidth);
const bleedMargin = labelModel.get('bleedMargin');
const labelLineModel = itemModel.getModel('labelLine');
@@ -316,8 +316,8 @@ export default function (
if (labelAlignTo === 'edge') {
// Adjust textX because text align of edge is opposite
textX = dx < 0
- ? viewLeft + labelMargin
- : viewLeft + viewWidth - labelMargin;
+ ? viewLeft + edgeDistance
+ : viewLeft + viewWidth - edgeDistance;
}
else {
textX = x3 + (dx < 0 ? -labelDistance : labelDistance);
@@ -355,10 +355,11 @@ export default function (
const textRect = label.getBoundingRect().clone();
textRect.applyTransform(label.getComputedTransform());
// Text has a default 1px stroke. Exclude this.
- textRect.x -= 1;
- textRect.y -= 1;
- textRect.width += 2.1;
- textRect.height += 2.1;
+ const margin = (label.style.margin || 0) + 2.1;
+ textRect.x -= margin / 2;
+ textRect.y -= margin / 2;
+ textRect.width += margin;
+ textRect.height += margin;
labelLayoutList.push({
label,
@@ -371,7 +372,7 @@ export default function (
textAlign: textAlign,
labelDistance: labelDistance,
labelAlignTo: labelAlignTo,
- labelMargin: labelMargin,
+ edgeDistance: edgeDistance,
bleedMargin: bleedMargin,
rect: textRect
});
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index 90ff6ad..7cac274 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -45,7 +45,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, isFunction, filter, indexOf, map, guid } from 'zrender/src/core/util';
+import { retrieve2, each, keys, isFunction, filter, indexOf } from 'zrender/src/core/util';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import Model from '../model/Model';
import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';
diff --git a/src/label/labelLayoutHelper.ts b/src/label/labelLayoutHelper.ts
index 0a7f227..738b6b6 100644
--- a/src/label/labelLayoutHelper.ts
+++ b/src/label/labelLayoutHelper.ts
@@ -57,14 +57,13 @@ export function prepareLayoutList(input: LabelLayoutListPrepareInput[]): LabelLa
continue;
}
- const layoutOption = rawItem.computedLayoutOption;
const label = rawItem.label;
const transform = label.getComputedTransform();
// NOTE: Get bounding rect after getComputedTransform, or label may not been updated by the host el.
const localRect = label.getBoundingRect();
const isAxisAligned = !transform || (transform[1] < 1e-5 && transform[2] < 1e-5);
- const minMargin = layoutOption.minMargin || 0;
+ const minMargin = label.style.margin || 0;
const globalRect = localRect.clone();
globalRect.applyTransform(transform);
globalRect.x -= minMargin / 2;
diff --git a/src/preprocessor/backwardCompat.ts b/src/preprocessor/backwardCompat.ts
index 13c22a0..f710dcc 100644
--- a/src/preprocessor/backwardCompat.ts
+++ b/src/preprocessor/backwardCompat.ts
@@ -26,6 +26,7 @@ import { Dictionary } from 'zrender/src/core/types';
import { ECUnitOption, SeriesOption } from '../util/types';
import { __DEV__ } from '../config';
import type { BarSeriesOption } from '../chart/bar/BarSeries';
+import { PieSeriesOption } from '../chart/pie/PieSeries';
function get(opt: Dictionary<any>, path: string): any {
const pathArr = path.split(',');
@@ -94,6 +95,18 @@ function compatBarItemStyle(option: Dictionary<any>) {
}
}
+function compatPieLabel(option: Dictionary<any>) {
+ if (!option) {
+ return;
+ }
+ if (option.alignTo === 'edge' && option.margin != null && option.edgeDistance == null) {
+ if (__DEV__) {
+ deprecateLog('label.margin has been changed to label.edgeDistance in pie.');
+ }
+ option.edgeDistance = option.margin;
+ }
+}
+
export default function (option: ECUnitOption, isTheme?: boolean) {
compatStyle(option, isTheme);
@@ -122,6 +135,13 @@ export default function (option: ECUnitOption, isTheme?: boolean) {
seriesOpt.clockwise = seriesOpt.clockWise;
deprecateLog('clockWise has been changed to clockwise.');
}
+ compatPieLabel((seriesOpt as PieSeriesOption).label);
+ const data = seriesOpt.data;
+ if (data && !isTypedArray(data)) {
+ for (let i = 0; i < data.length; i++) {
+ compatPieLabel(data[i]);
+ }
+ }
}
else if (seriesType === 'gauge') {
const pointerColor = get(seriesOpt, 'pointer.color');
@@ -136,7 +156,7 @@ export default function (option: ECUnitOption, isTheme?: boolean) {
const data = seriesOpt.data;
if (data && !isTypedArray(data)) {
for (let i = 0; i < data.length; i++) {
- if (data[i]) {
+ if (typeof data[i] === 'object') {
compatBarItemStyle(data[i]);
compatBarItemStyle(data[i] && data[i].emphasis);
}
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index b39bf52..41a8e9d 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -961,6 +961,10 @@ function setTextStyleCommon(
if (overflow) {
textStyle.overflow = overflow;
}
+ const margin = textStyleModel.get('minMargin');
+ if (margin != null) {
+ textStyle.margin = margin;
+ }
setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true);
}
diff --git a/src/util/types.ts b/src/util/types.ts
index d6f3b79..9184fa4 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -774,6 +774,12 @@ export interface LabelOption extends TextCommonOption {
rotate?: number
offset?: number[]
+ /**
+ * Min margin between labels. Used when label has layout.
+ */
+ // It's minMargin instead of margin is for not breaking the previous code using margin.
+ minMargin?: number
+
overflow?: TextStyleProps['overflow']
silent?: boolean
precision?: number | 'auto'
@@ -851,12 +857,6 @@ export interface LabelLayoutOption {
* @default 'none'
*/
hideOverlap?: boolean
-
- /**
- * Minimal margin between two labels which will be considered as overlapped.
- */
- minMargin?: number
-
/**
* If label is draggable.
*/
diff --git a/test/label-layout.html b/test/label-layout.html
index 011c444..bd17c2f 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -440,8 +440,7 @@ under the License.
draggable: true,
align: 'center',
moveOverlap: 'shift-x',
- hideOverlap: true,
- minMargin: 10
+ hideOverlap: true
},
labelLine: {
show: true,
@@ -455,6 +454,7 @@ under the License.
formatter: function (param) {
return param.data[3];
},
+ minMargin: 10,
color: '#333',
textBorderColor: '#fff',
textBorderWidth: 1,
@@ -504,8 +504,7 @@ under the License.
x: 500,
draggable: true,
moveOverlap: 'shift-y',
- // hideOverlap: true,
- minMargin: 2
+ // hideOverlap: true
},
labelLine: {
show: true,
@@ -521,7 +520,8 @@ under the License.
},
textBorderColor: '#fff',
textBorderWidth: 1,
- position: 'top'
+ position: 'top',
+ minMargin: 2
}
}]
};
diff --git a/test/pie-alignTo.html b/test/pie-alignTo.html
index ab95d50..78c0e27 100644
--- a/test/pie-alignTo.html
+++ b/test/pie-alignTo.html
@@ -73,7 +73,7 @@ under the License.
length2: 15
},
label: {
- margin: 20,
+ edgeDistance: 20,
position: 'outer'
}
}]
@@ -89,7 +89,7 @@ under the License.
length2: 15
},
label: {
- margin: 20,
+ edgeDistance: 20,
position: 'outer',
alignTo: 'labelLine'
}
@@ -106,7 +106,7 @@ under the License.
length2: 15
},
label: {
- margin: 20,
+ edgeDistance: 20,
position: 'outer',
alignTo: 'edge'
}
@@ -141,7 +141,7 @@ under the License.
length2: 15
},
label: {
- margin: 20,
+ edgeDistance: 20,
position: 'outer',
alignTo: 'labelLine'
},
@@ -176,7 +176,7 @@ under the License.
length2: 15
},
label: {
- margin: 20,
+ edgeDistance: 20,
position: 'outer',
alignTo: 'labelLine'
},
@@ -211,7 +211,7 @@ under the License.
});
var config = {
length2: 15,
- margin: 20,
+ edgeDistance: 20,
overflow: 'truncate'
};
@@ -222,7 +222,7 @@ under the License.
length2: config.length2
},
label: {
- margin: config.margin,
+ edgeDistance: config.edgeDistance,
overflow: config.overflow
}
}]
@@ -238,7 +238,7 @@ under the License.
length2: config.length2,
},
label: {
- margin: config.margin,
+ edgeDistance: config.edgeDistance,
overflow: config.overflow
}
})
@@ -247,7 +247,7 @@ under the License.
}
gui.add(config, 'length2', 0, 300).onChange(update);
- gui.add(config, 'margin', 0, 300).onChange(update);
+ gui.add(config, 'edgeDistance', 0, 300).onChange(update);
gui.add(config, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
});
</script>
diff --git a/test/pie-label-mobile.html b/test/pie-label-mobile.html
index 674e7b0..352dbbe 100644
--- a/test/pie-label-mobile.html
+++ b/test/pie-label-mobile.html
@@ -121,9 +121,9 @@ under the License.
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 小时}',
- margin: 10,
+ minMargin: 5,
+ edgeDistance: 10,
lineHeight: 15,
- // color: 'inherit',
rich: {
time: {
fontSize: 10,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org