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/23 14:31:54 UTC
[incubator-echarts] branch label-enhancement updated: fix(label):
recalculate labelLine if label position is changed by users in layout stage
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 f6c5bef fix(label): recalculate labelLine if label position is changed by users in layout stage
f6c5bef is described below
commit f6c5bef95b29781dcc78e4d949cd83be405f409f
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 23 22:31:03 2020 +0800
fix(label): recalculate labelLine if label position is changed by users in layout stage
---
src/chart/funnel/FunnelView.ts | 9 +-
src/echarts.ts | 2 -
src/label/LabelManager.ts | 50 ++++----
src/label/labelGuideHelper.ts | 2 +-
test/label-layout.html | 283 +++++++++++++++++++++++++++++++----------
test/pie-label.html | 5 +-
6 files changed, 250 insertions(+), 101 deletions(-)
diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index e10efa0..334510d 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -26,6 +26,7 @@ import List from '../../data/List';
import { ColorString, LabelOption } from '../../util/types';
import Model from '../../model/Model';
import { setLabelLineStyle } from '../../label/labelGuideHelper';
+import points from '../../layout/points';
const opacityAccessPath = ['itemStyle', 'opacity'] as const;
@@ -131,10 +132,16 @@ class FunnelPiece extends graphic.Polygon {
outsideFill: visualColor
});
+ const linePoints = labelLayout.linePoints;
+
labelLine.setShape({
- points: labelLayout.linePoints || labelLayout.linePoints
+ points: linePoints
});
+ polygon.textGuideLineConfig = {
+ anchor: linePoints ? new graphic.Point(linePoints[0][0], linePoints[0][1]) : null
+ };
+
// Make sure update style on labelText after setLabelStyle.
// Because setLabelStyle will replace a new style on it.
graphic.updateProps(labelText, {
diff --git a/src/echarts.ts b/src/echarts.ts
index ed58220..68e6331 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -1127,7 +1127,6 @@ class ECharts extends Eventful {
labelManager.updateLayoutConfig(this._api);
labelManager.layout(this._api);
labelManager.processLabelsOverall();
- labelManager.applyAnimation();
}
appendData(params: {
@@ -1770,7 +1769,6 @@ class ECharts extends Eventful {
labelManager.updateLayoutConfig(api);
labelManager.layout(api);
labelManager.processLabelsOverall();
- labelManager.applyAnimation();
ecModel.eachSeries(function (seriesModel) {
const chartView = ecIns._chartsMap[seriesModel.__viewId];
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index 9f49fe7..3a84d2f 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -113,7 +113,7 @@ const LABEL_OPTION_TO_STYLE_KEYS = ['align', 'verticalAlign', 'width', 'height']
const dummyTransformable = new Transformable();
-const labelAnimationStore = makeInner<{
+const labelLayoutInnerStore = makeInner<{
oldLayout: {
x: number,
y: number,
@@ -128,7 +128,9 @@ const labelAnimationStore = makeInner<{
x?: number,
y?: number,
rotation?: number
- }
+ },
+
+ changedByUser?: boolean
}, ZRText>();
const labelLineAnimationStore = makeInner<{
@@ -321,10 +323,12 @@ class LabelManager {
offset: [layoutOption.dx || 0, layoutOption.dy || 0]
});
}
+ let changedByUser = false;
if (layoutOption.x != null) {
// TODO width of chart view.
label.x = parsePercent(layoutOption.x, width);
label.setStyle('x', 0); // Ignore movement in style. TODO: origin.
+ changedByUser = changedByUser || true;
}
else {
label.x = defaultLabelAttr.x;
@@ -335,11 +339,15 @@ class LabelManager {
// TODO height of chart view.
label.y = parsePercent(layoutOption.y, height);
label.setStyle('y', 0); // Ignore movement in style.
+ changedByUser = changedByUser || true;
}
else {
label.y = defaultLabelAttr.y;
label.setStyle('y', defaultLabelAttr.style.y);
}
+ if (changedByUser) {
+ labelLayoutInnerStore(label).changedByUser = true;
+ }
label.rotation = layoutOption.rotate != null
? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation;
@@ -395,32 +403,26 @@ class LabelManager {
each(this._chartViewList, (chartView) => {
const seriesModel = chartView.__model;
const ignoreLabelLineUpdate = chartView.ignoreLabelLineUpdate;
+ const animationEnabled = seriesModel.isAnimationEnabled();
- if (!ignoreLabelLineUpdate) {
- chartView.group.traverse((child) => {
- if (child.ignore) {
- return true; // Stop traverse descendants.
- }
+ chartView.group.traverse((child) => {
+ if (child.ignore) {
+ return true; // Stop traverse descendants.
+ }
+ let needsUpdateLabelLine = !ignoreLabelLineUpdate;
+ const label = child.getTextContent();
+ if (!needsUpdateLabelLine && label) {
+ needsUpdateLabelLine = labelLayoutInnerStore(label).changedByUser;
+ }
+ if (needsUpdateLabelLine) {
this._updateLabelLine(child, seriesModel);
- });
- }
- });
- }
-
- applyAnimation() {
- each(this._chartViewList, (chartView) => {
- const seriesModel = chartView.__model;
- const animationEnabled = seriesModel.isAnimationEnabled();
+ }
- if (animationEnabled) {
- chartView.group.traverse((child) => {
- if (child.ignore) {
- return true; // Stop traverse descendants.
- }
+ if (animationEnabled) {
this._animateLabels(child, seriesModel);
- });
- }
+ }
+ });
});
}
@@ -457,7 +459,7 @@ class LabelManager {
const guideLine = el.getTextGuideLine();
// Animate
if (textEl && !textEl.ignore && !textEl.invisible) {
- const layoutStore = labelAnimationStore(textEl);
+ const layoutStore = labelLayoutInnerStore(textEl);
const oldLayout = layoutStore.oldLayout;
const newProps = {
x: textEl.x,
diff --git a/src/label/labelGuideHelper.ts b/src/label/labelGuideHelper.ts
index 5de5092..aea74d4 100644
--- a/src/label/labelGuideHelper.ts
+++ b/src/label/labelGuideHelper.ts
@@ -362,7 +362,7 @@ export function updateLabelLinePoints(
let minDist = Infinity;
const anchorPoint = labelGuideConfig && labelGuideConfig.anchor;
const targetTransform = target.getComputedTransform();
- const targetInversedTransform = invert([], targetTransform);
+ const targetInversedTransform = targetTransform && invert([], targetTransform);
const len = labelLineModel.get('length2') || 0;
if (anchorPoint) {
diff --git a/test/label-layout.html b/test/label-layout.html
index 941d377..a780775 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -48,6 +48,7 @@ under the License.
<div id="main5"></div>
<div id="main6"></div>
<div id="main7"></div>
+ <div id="main8"></div>
@@ -214,81 +215,148 @@ under the License.
- <script>
- require(['echarts', 'extension/dataTool'], function (echarts, dataTool) {
- $.get('./data/les-miserables.gexf', function (xml) {
- var graph = dataTool.gexf.parse(xml);
- var categories = [];
- for (var i = 0; i < 9; i++) {
- categories[i] = {
- name: '类目' + i
- };
- }
- graph.nodes.forEach(function (node) {
- delete node.itemStyle;
- node.value = node.symbolSize;
- node.category = node.attributes['modularity_class'];
- });
- graph.links.forEach(function (link) {
- delete link.lineStyle;
- });
- var option = {
- legend: [{}],
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
-
- series : [
- {
- name: 'Les Miserables',
- type: 'graph',
- layout: 'none',
- data: graph.nodes,
- links: graph.links,
- categories: categories,
- roam: true,
- draggable: true,
-
- label: {
- show: true,
- formatter: '{b}',
- position: 'right'
- },
- labelLayout: {
- hideOverlap: true
- },
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
- emphasis: {
- label: {
- show: true
- }
- },
- lineStyle: {
- color: 'source',
- curveness: 0.3
- },
- emphasis: {
- lineStyle: {
- width: 10
- }
- }
- }
- ]
- };
+ const data = [{
+ "name": "United States",
+ "value": [213242, 22.86439111423725, "United States"]
+ }, {
+ "name": "Italy",
+ "value": [110574, 11.856047040759652, "Italy"]
+ }, {
+ "name": "Spain",
+ "value": [104118, 11.163817043697554, "Spain"]
+ }, {
+ "name": "China",
+ "value": [82361, 8.830971931231625, "China"]
+ }, {
+ "name": "Germany",
+ "value": [77872, 8.349649059978255, "Germany"]
+ }, {
+ "name": "France",
+ "value": [57749, 6.192005901539504, "France"]
+ }, {
+ "name": "Iran",
+ "value": [47593, 5.103051773571311, "Iran"]
+ }, {
+ "name": "United Kingdom",
+ "value": [29865, 3.202207072840695, "United Kingdom"]
+ }, {
+ "name": "Switzerland",
+ "value": [17768, 1.905133610253925, "Switzerland"]
+ }, {
+ "name": "Turkey",
+ "value": [15679, 1.6811453103991045, "Turkey"]
+ }, {
+ "name": "Belgium",
+ "value": [13964, 1.4972583145872247, "Belgium"]
+ }, {
+ "name": "Netherlands",
+ "value": [13696, 1.4685226207810533, "Netherlands"]
+ }, {
+ "name": "Austria",
+ "value": [10711, 1.1484627476041078, "Austria"]
+ }, {
+ "name": "Korea, South",
+ "value": [9887, 1.0601112114239395, "Korea, South"]
+ }, {
+ "name": "Canada",
+ "value": [9560, 1.0250493760708872, "Canada"]
+ }, {
+ "name": "Portugal",
+ "value": [8251, 0.8846948119205952, "Portugal"]
+ }, {
+ "name": "Brazil",
+ "value": [6836, 0.7329746375335339, "Brazil"]
+ }, {
+ "name": "Israel",
+ "value": [6092, 0.6532009203999837, "Israel"]
+ }, {
+ "name": "Sweden",
+ "value": [4947, 0.5304308852952593, "Sweden"]
+ }, {
+ "name": "Norway",
+ "value": [4863, 0.52142417529631, "Norway"]
+ }, {
+ "name": "Australia",
+ "value": [4862, 0.5213169525582273, "Australia"]
+ }, {
+ "name": "Czechia",
+ "value": [3508, 0.37613736519421254, "Czechia"]
+ }, {
+ "name": "Ireland",
+ "value": [3447, 0.3695967781711661, "Ireland"]
+ }, {
+ "name": "Denmark",
+ "value": [3290, 0.35276280829217765, "Denmark"]
+ }, {
+ "name": "Chile",
+ "value": [3031, 0.3249921191287509, "Chile"]
+ }, {
+ "name": "Malaysia",
+ "value": [2908, 0.31180372234457526, "Malaysia"]
+ }, {
+ "name": "Russia",
+ "value": [2777, 0.2977575436557378, "Russia"]
+ }, {
+ "name": "Ecuador",
+ "value": [2748, 0.29464808425133865, "Ecuador"]
+ }, {
+ "name": "Poland",
+ "value": [2554, 0.2738468730632893, "Poland"]
+ }, {
+ "name": "Romania",
+ "value": [2460, 0.2637679356835128, "Romania"]
+ }];
+
+ var option = {
+ backgroundColor: '#333',
+ visualMap: {
+ dimension: 0,
+ left: 10,
+ itemWidth: 12,
+ min: data[29].value[0],
+ max: data[0].value[0],
+ text: ['High', 'Low'],
+ textStyle: {
+ color: '#ddd'
+ },
+ inRange: {
+ color: ['lightskyblue', 'yellow', 'orangered', 'red']
+ }
+ },
+ series: [{
+ type: 'pie',
+ data: data,
+ roseType: 'radius',
+ radius: ['30%', '70%'],
+ labelLine: {
+ length2: 100
+ },
+ labelLayout: function (params) {
+ const cx = window.innerWidth / 2;
+ const isLeft = params.labelRect.x < cx;
+ return isLeft ? {
+ x: cx - 200,
+ textAlign: 'right',
+ } : {
+ x: cx + 100,
+ textAlign: 'left'
+ };
+ }
+ }]
+ };
- var chart = testHelper.create(echarts, 'main2', {
- title: [
- 'Hide overlap in graph zooming.'
- ],
- height: 800,
- option: option
- });
+ var chart = testHelper.create(echarts, 'main2', {
+ title: 'Pie label edge.',
+ height: 300,
+ option
});
});
</script>
-
-
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
option = {
@@ -339,7 +407,7 @@ under the License.
var chart = testHelper.create(echarts, 'main3', {
title: [
- 'Overlap of line.'
+ 'Pie label center.'
],
option: option
});
@@ -466,6 +534,83 @@ under the License.
});
});
</script>
+
+
+
+ <script>
+ require(['echarts', 'extension/dataTool'], function (echarts, dataTool) {
+ $.get('./data/les-miserables.gexf', function (xml) {
+ var graph = dataTool.gexf.parse(xml);
+ var categories = [];
+ for (var i = 0; i < 9; i++) {
+ categories[i] = {
+ name: '类目' + i
+ };
+ }
+ graph.nodes.forEach(function (node) {
+ delete node.itemStyle;
+ node.value = node.symbolSize;
+ node.category = node.attributes['modularity_class'];
+ });
+ graph.links.forEach(function (link) {
+ delete link.lineStyle;
+ });
+ var option = {
+ legend: [{}],
+ animationDurationUpdate: 1500,
+ animationEasingUpdate: 'quinticInOut',
+
+ series : [
+ {
+ name: 'Les Miserables',
+ type: 'graph',
+ layout: 'none',
+ data: graph.nodes,
+ links: graph.links,
+ categories: categories,
+ roam: true,
+ draggable: true,
+
+ label: {
+ show: true,
+ formatter: '{b}',
+ position: 'right'
+ },
+
+ labelLayout: {
+ hideOverlap: true
+ },
+
+ emphasis: {
+ label: {
+ show: true
+ }
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ emphasis: {
+ lineStyle: {
+ width: 10
+ }
+ }
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main8', {
+ title: [
+ 'Hide overlap in graph zooming.'
+ ],
+ height: 800,
+ option: option
+ });
+ });
+ });
+ </script>
+
+
</body>
</html>
diff --git a/test/pie-label.html b/test/pie-label.html
index 0e8fa78..69acccf 100644
--- a/test/pie-label.html
+++ b/test/pie-label.html
@@ -629,10 +629,7 @@ under the License.
type: 'pie',
data: data,
roseType: 'radius',
- radius: ['30%', '70%'],
- label: {
- textBorderColor: 'none'
- }
+ radius: ['30%', '70%']
}]
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org