Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 f6c5bef9 编写于 作者: P pissang
浏览文件
操作

fix(label): recalculate labelLine if label position is changed by users in layout stage

上级 895cc001
隐藏空白更改
内联 并排
Showing with 250 addition and 101 deletion
src/chart/funnel/FunnelView.ts
浏览文件 @ f6c5bef9
......@@ -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, {
......
src/echarts.ts
浏览文件 @ f6c5bef9
......@@ -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];
......
src/label/LabelManager.ts
浏览文件 @ f6c5bef9
......@@ -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,
......
src/label/labelGuideHelper.ts
浏览文件 @ f6c5bef9
......@@ -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) {
......
test/label-layout.html
浏览文件 @ f6c5bef9
......@@ -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>
test/pie-label.html
浏览文件 @ f6c5bef9
......@@ -629,10 +629,7 @@ under the License.
type: 'pie',
data: data,
roseType: 'radius',
radius: ['30%', '70%'],
label: {
textBorderColor: 'none'
}
radius: ['30%', '70%']
}]
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或