You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2019/12/19 07:40:41 UTC
[incubator-echarts] branch master updated (ea2bcb3 -> 6aec55a)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
from ea2bcb3 Merge pull request #11837 from apache/ut-ci
new 89221c8 feat(markLine): provide new layouts for markLine labels #11569
new 9b67094 test(markLine): add test cases for #11569
new 6aec55a feat(markLine): support distance array. close #11569
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/chart/helper/Line.js | 110 ++++++++++++++++++++++++++--------
src/component/marker/MarkLineModel.js | 3 +-
test/markLine.html | 96 ++++++++++++++++++-----------
3 files changed, 147 insertions(+), 62 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/03: feat(markLine): provide new layouts for
markLine labels #11569
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 89221c831217f0b17da5f88d6f3c2426ca64ee9a
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Dec 12 16:20:34 2019 +0800
feat(markLine): provide new layouts for markLine labels #11569
---
src/chart/helper/Line.js | 103 +++++++++++++++++++++++++---------
src/component/marker/MarkLineModel.js | 3 +-
2 files changed, 79 insertions(+), 27 deletions(-)
diff --git a/src/chart/helper/Line.js b/src/chart/helper/Line.js
index 2b81a7a..e52dcc2 100644
--- a/src/chart/helper/Line.js
+++ b/src/chart/helper/Line.js
@@ -141,39 +141,88 @@ function updateSymbolAndLabelBeforeLineUpdate() {
var textPosition;
var textAlign;
var textVerticalAlign;
-
- var distance = 5 * invScale;
- // End
- if (label.__position === 'end') {
- textPosition = [d[0] * distance + toPos[0], d[1] * distance + toPos[1]];
- textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
- textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+ var textOrigin;
+
+ var distance = label.__labelDistance * invScale;
+ var halfPercent = percent / 2;
+ var tangent = line.tangentAt(halfPercent);
+ var n = [tangent[1], -tangent[0]];
+ var cp = line.pointAt(halfPercent);
+ if (n[1] > 0) {
+ n[0] = -n[0];
+ n[1] = -n[1];
}
- // Middle
- else if (label.__position === 'middle') {
- var halfPercent = percent / 2;
- var tangent = line.tangentAt(halfPercent);
- var n = [tangent[1], -tangent[0]];
- var cp = line.pointAt(halfPercent);
- if (n[1] > 0) {
- n[0] = -n[0];
- n[1] = -n[1];
- }
- textPosition = [cp[0] + n[0] * distance, cp[1] + n[1] * distance];
- textAlign = 'center';
- textVerticalAlign = 'bottom';
+ var dir = tangent[0] < 0 ? -1 : 1;
+
+ if (label.__position !== 'start' && label.__position !== 'end') {
var rotation = -Math.atan2(tangent[1], tangent[0]);
if (toPos[0] < fromPos[0]) {
rotation = Math.PI + rotation;
}
label.attr('rotation', rotation);
}
- // Start
- else {
- textPosition = [-d[0] * distance + fromPos[0], -d[1] * distance + fromPos[1]];
- textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
- textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+
+ var dy;
+ switch (label.__position) {
+ case 'insideStartTop':
+ case 'insideMiddleTop':
+ case 'insideEndTop':
+ case 'middle':
+ dy = -distance;
+ textVerticalAlign = 'bottom';
+ break;
+
+ case 'insideStartBottom':
+ case 'insideMiddleBottom':
+ case 'insideEndBottom':
+ dy = distance;
+ textVerticalAlign = 'top';
+ break;
+
+ default:
+ dy = 0;
+ textVerticalAlign = 'middle';
}
+
+ switch (label.__position) {
+ case 'end':
+ textPosition = [d[0] * distance + toPos[0], d[1] * distance + toPos[1]];
+ textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
+ textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+ break;
+
+ case 'start':
+ textPosition = [-d[0] * distance + fromPos[0], -d[1] * distance + fromPos[1]];
+ textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
+ textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+ break;
+
+ case 'insideStartTop':
+ case 'insideStart':
+ case 'insideStartBottom':
+ textPosition = [distance * dir + fromPos[0], fromPos[1] + dy];
+ textAlign = tangent[0] < 0 ? 'right' : 'left';
+ textOrigin = [-distance * dir, -dy];
+ break;
+
+ case 'insideMiddleTop':
+ case 'insideMiddle':
+ case 'insideMiddleBottom':
+ case 'middle':
+ textPosition = [cp[0], cp[1] + dy];
+ textAlign = 'center';
+ textOrigin = [0, -dy];
+ break;
+
+ case 'insideEndTop':
+ case 'insideEnd':
+ case 'insideEndBottom':
+ textPosition = [-distance * dir + toPos[0], toPos[1] + dy];
+ textAlign = tangent[0] >= 0 ? 'right' : 'left';
+ textOrigin = [distance * dir, -dy];
+ break;
+ }
+
label.attr({
style: {
// Use the user specified text align and baseline first
@@ -181,7 +230,8 @@ function updateSymbolAndLabelBeforeLineUpdate() {
textAlign: label.__textAlign || textAlign
},
position: textPosition,
- scale: [invScale, invScale]
+ scale: [invScale, invScale],
+ origin: textOrigin
});
}
}
@@ -357,6 +407,7 @@ lineProto._updateCommonStl = function (lineData, idx, seriesScope) {
label.__verticalAlign = labelStyle.textVerticalAlign;
// 'start', 'middle', 'end'
label.__position = labelModel.get('position') || 'middle';
+ label.__labelDistance = labelModel.get('distance');
}
if (emphasisText != null) {
diff --git a/src/component/marker/MarkLineModel.js b/src/component/marker/MarkLineModel.js
index f241fce..077e5b9 100644
--- a/src/component/marker/MarkLineModel.js
+++ b/src/component/marker/MarkLineModel.js
@@ -38,7 +38,8 @@ export default MarkerModel.extend({
},
label: {
show: true,
- position: 'end'
+ position: 'end',
+ distance: 5
},
lineStyle: {
type: 'dashed'
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 03/03: feat(markLine): support distance array.
close #11569
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 6aec55ae7a90cc537e1239391fbedc4d4e99b14d
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Dec 19 14:52:42 2019 +0800
feat(markLine): support distance array. close #11569
---
src/chart/helper/Line.js | 27 +++++++++++++++++----------
test/markLine.html | 5 ++++-
2 files changed, 21 insertions(+), 11 deletions(-)
diff --git a/src/chart/helper/Line.js b/src/chart/helper/Line.js
index e52dcc2..f2b2d8e 100644
--- a/src/chart/helper/Line.js
+++ b/src/chart/helper/Line.js
@@ -143,7 +143,9 @@ function updateSymbolAndLabelBeforeLineUpdate() {
var textVerticalAlign;
var textOrigin;
- var distance = label.__labelDistance * invScale;
+ var distance = label.__labelDistance;
+ var distanceX = distance[0] * invScale;
+ var distanceY = distance[1] * invScale;
var halfPercent = percent / 2;
var tangent = line.tangentAt(halfPercent);
var n = [tangent[1], -tangent[0]];
@@ -168,14 +170,14 @@ function updateSymbolAndLabelBeforeLineUpdate() {
case 'insideMiddleTop':
case 'insideEndTop':
case 'middle':
- dy = -distance;
+ dy = -distanceY;
textVerticalAlign = 'bottom';
break;
case 'insideStartBottom':
case 'insideMiddleBottom':
case 'insideEndBottom':
- dy = distance;
+ dy = distanceY;
textVerticalAlign = 'top';
break;
@@ -186,13 +188,13 @@ function updateSymbolAndLabelBeforeLineUpdate() {
switch (label.__position) {
case 'end':
- textPosition = [d[0] * distance + toPos[0], d[1] * distance + toPos[1]];
+ textPosition = [d[0] * distanceX + toPos[0], d[1] * distanceY + toPos[1]];
textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
break;
case 'start':
- textPosition = [-d[0] * distance + fromPos[0], -d[1] * distance + fromPos[1]];
+ textPosition = [-d[0] * distanceX + fromPos[0], -d[1] * distanceY + fromPos[1]];
textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
break;
@@ -200,9 +202,9 @@ function updateSymbolAndLabelBeforeLineUpdate() {
case 'insideStartTop':
case 'insideStart':
case 'insideStartBottom':
- textPosition = [distance * dir + fromPos[0], fromPos[1] + dy];
+ textPosition = [distanceX * dir + fromPos[0], fromPos[1] + dy];
textAlign = tangent[0] < 0 ? 'right' : 'left';
- textOrigin = [-distance * dir, -dy];
+ textOrigin = [-distanceX * dir, -dy];
break;
case 'insideMiddleTop':
@@ -217,9 +219,9 @@ function updateSymbolAndLabelBeforeLineUpdate() {
case 'insideEndTop':
case 'insideEnd':
case 'insideEndBottom':
- textPosition = [-distance * dir + toPos[0], toPos[1] + dy];
+ textPosition = [-distanceX * dir + toPos[0], toPos[1] + dy];
textAlign = tangent[0] >= 0 ? 'right' : 'left';
- textOrigin = [distance * dir, -dy];
+ textOrigin = [distanceX * dir, -dy];
break;
}
@@ -407,7 +409,12 @@ lineProto._updateCommonStl = function (lineData, idx, seriesScope) {
label.__verticalAlign = labelStyle.textVerticalAlign;
// 'start', 'middle', 'end'
label.__position = labelModel.get('position') || 'middle';
- label.__labelDistance = labelModel.get('distance');
+
+ var distance = labelModel.get('distance');
+ if (!zrUtil.isArray(distance)) {
+ distance = [distance, distance];
+ }
+ label.__labelDistance = distance;
}
if (emphasisText != null) {
diff --git a/test/markLine.html b/test/markLine.html
index 38dde25..f887ceb 100644
--- a/test/markLine.html
+++ b/test/markLine.html
@@ -152,7 +152,10 @@ under the License.
data: data2,
markLine: {
- data: markLine2
+ data: markLine2,
+ label: {
+ distance: [20, 5]
+ }
}
}]
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/03: test(markLine): add test cases for #11569
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 9b67094fb5328e276d931cf58f7f01be4db471a2
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Dec 12 16:24:13 2019 +0800
test(markLine): add test cases for #11569
---
test/markLine.html | 93 ++++++++++++++++++++++++++++++++++--------------------
1 file changed, 58 insertions(+), 35 deletions(-)
diff --git a/test/markLine.html b/test/markLine.html
index e0b343d..38dde25 100644
--- a/test/markLine.html
+++ b/test/markLine.html
@@ -55,7 +55,61 @@ under the License.
data2.push(+Math.random().toFixed(2));
}
+ var markLine1 = [];
+ var markLine2 = [];
+ var positions = [
+ 'start', 'middle', 'end',
+ 'insideStart', 'insideStartTop', 'insideStartBottom',
+ 'insideMiddle', 'insideMiddleTop', 'insideMiddleBottom',
+ 'insideEnd', 'insideEndTop', 'insideEndBottom'
+ ];
+ for (var i = 0; i < positions.length; ++i) {
+ markLine1.push({
+ name: positions[i],
+ yAxis: 1.8 - 0.2 * Math.floor(i / 3),
+ label: {
+ formatter: '{b}',
+ position: positions[i]
+ }
+ });
+ markLine1.push([{
+ name: 'start: ' + positions[i],
+ type: 'min',
+ label: {
+ formatter: positions[i],
+ position: positions[i]
+ }
+ }, {
+ name: 'end: ' + positions[i],
+ type: 'max'
+ }]);
+
+ markLine2.push({
+ name: positions[i],
+ xAxis: Math.floor(i / 3),
+ label: {
+ formatter: '{b}',
+ position: positions[i]
+ }
+ });
+ markLine2.push([{
+ name: 'start: ' + positions[i],
+ type: 'min',
+ valueIndex: 0,
+ label: {
+ formatter: positions[i],
+ position: positions[i]
+ }
+ }, {
+ name: 'end: ' + positions[i],
+ valueIndex: 0,
+ type: 'max'
+ }]);
+ }
+
chart.setOption({
+ animation: false,
+ color: ['#f60', '#0c6'],
legend: {
data: ['line', 'line2']
},
@@ -77,7 +131,8 @@ under the License.
yAxis: {
splitLine: {
// show: false
- }
+ },
+ max: 2
},
series: [{
name: 'line',
@@ -87,26 +142,7 @@ under the License.
data: data1,
markLine: {
- data: [{
- name: '平均值',
- type: 'average',
- valueIndex: 1
- }, {
- name: '指定值',
- yAxis: 1
- }, [{
- name: '标签位置为中间',
- type: 'min',
- label: {
- normal: {
- formatter: '{b}',
- position: 'middle'
- }
- }
- }, {
- name: '标签位置为中间',
- type: 'max'
- }]]
+ data: markLine1
}
}, {
name: 'line2',
@@ -116,20 +152,7 @@ under the License.
data: data2,
markLine: {
- data: [{
- name: '平均值',
- type: 'average',
- valueIndex: 0
- }, {
- name: '指定值',
- xAxis: 3
- }, [{
- name: '最大点',
- type: 'max'
- }, {
- x: '90%',
- yAxis: 'max'
- }]]
+ data: markLine2
}
}]
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org