This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/master by this push:
new 51ae58df4 Merge pull request #21320 from mynk2611/fix-20216
51ae58df4 is described below
commit 51ae58df4b191d91680a6e8e12c60b5bbf0884fd
Author: Mayank Mehta <[email protected]>
AuthorDate: Fri Oct 24 14:32:26 2025 +0530
Merge pull request #21320 from mynk2611/fix-20216
fix(lines): fix effect symbol flip on unidirectional loop end when
`roundTrip` is not enabled
---
src/chart/helper/EffectLine.ts | 6 +--
src/chart/helper/EffectPolyline.ts | 6 +--
test/lines-symbol.html | 107 ++++++++++++++++++++++++++-----------
3 files changed, 83 insertions(+), 36 deletions(-)
diff --git a/src/chart/helper/EffectLine.ts b/src/chart/helper/EffectLine.ts
index f368d83ac..195783ed7 100644
--- a/src/chart/helper/EffectLine.ts
+++ b/src/chart/helper/EffectLine.ts
@@ -207,7 +207,7 @@ class EffectLine extends graphic.Group {
const p1 = symbol.__p1;
const p2 = symbol.__p2;
const cp1 = symbol.__cp1;
- const t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
+ const t = symbol.__t <= 1 ? symbol.__t : 2 - symbol.__t;
const pos = [symbol.x, symbol.y];
const lastPos = pos.slice();
const quadraticAt = curveUtil.quadraticAt;
@@ -216,9 +216,9 @@ class EffectLine extends graphic.Group {
pos[1] = quadraticAt(p1[1], cp1[1], p2[1], t);
// Tangent
- const tx = symbol.__t < 1 ? quadraticDerivativeAt(p1[0], cp1[0],
p2[0], t)
+ const tx = symbol.__t <= 1 ? quadraticDerivativeAt(p1[0], cp1[0],
p2[0], t)
: quadraticDerivativeAt(p2[0], cp1[0], p1[0], 1 - t);
- const ty = symbol.__t < 1 ? quadraticDerivativeAt(p1[1], cp1[1],
p2[1], t)
+ const ty = symbol.__t <= 1 ? quadraticDerivativeAt(p1[1], cp1[1],
p2[1], t)
: quadraticDerivativeAt(p2[1], cp1[1], p1[1], 1 - t);
diff --git a/src/chart/helper/EffectPolyline.ts
b/src/chart/helper/EffectPolyline.ts
index 389dbe4d8..282df0725 100644
--- a/src/chart/helper/EffectPolyline.ts
+++ b/src/chart/helper/EffectPolyline.ts
@@ -67,7 +67,7 @@ class EffectPolyline extends EffectLine {
// Override
protected _updateSymbolPosition(symbol: ECSymbolOnEffectLine) {
- const t = symbol.__t < 1 ? symbol.__t : 2 - symbol.__t;
+ const t = symbol.__t <= 1 ? symbol.__t : 2 - symbol.__t;
const points = this._points;
const offsets = this._offsets;
const len = points.length;
@@ -107,8 +107,8 @@ class EffectPolyline extends EffectLine {
symbol.x = p0[0] * (1 - p) + p * p1[0];
symbol.y = p0[1] * (1 - p) + p * p1[1];
- const tx = symbol.__t < 1 ? p1[0] - p0[0] : p0[0] - p1[0];
- const ty = symbol.__t < 1 ? p1[1] - p0[1] : p0[1] - p1[1];
+ const tx = symbol.__t <= 1 ? p1[0] - p0[0] : p0[0] - p1[0];
+ const ty = symbol.__t <= 1 ? p1[1] - p0[1] : p0[1] - p1[1];
symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
this._lastFrame = frame;
diff --git a/test/lines-symbol.html b/test/lines-symbol.html
index 560da4b6c..d22371fb3 100644
--- a/test/lines-symbol.html
+++ b/test/lines-symbol.html
@@ -23,27 +23,19 @@ under the License.
<meta charset='utf-8'>
<script src='lib/simpleRequire.js'></script>
<script src='lib/config.js'></script>
- <script src='lib/jquery.min.js'></script>
- <script
src='http://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu'></script>
- <meta name='viewport' content='width=device-width, initial-scale=1' />
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
- <style>
- html, body, #main {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- </style>
- <div id='main'></div>
- <script>
+ <div id='main0'></div>
+ <div id='main1'></div>
+ <script>
require([
'echarts',
'./data/map/js/china.js'
], function (echarts) {
- var myChart = echarts.init(document.getElementById('main'));
-
var planePath =
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var option = {
@@ -51,7 +43,7 @@ under the License.
text: '地图数据来源：天地图 cloudcenter.tianditu.gov.cn',
subtext: '仅作为功能测试使用，线上产品应从天地图获取最新地图数据并申请审图号',
link: 'https://cloudcenter.tianditu.gov.cn/',
- bottom: 15,
+ top: 15,
left: 15,
textStyle: {
color: '#888',
@@ -89,10 +81,8 @@ under the License.
},
zlevel: 1,
lineStyle: {
- normal: {
- width: 4,
- opacity: 0.2
- }
+ width: 4,
+ opacity: 0.2
},
data: [{
coords: [
@@ -100,9 +90,7 @@ under the License.
[120.5107, 23.2196]
],
lineStyle: {
- normal: {
- curveness: 0.2
- }
+ curveness: 0.2
}
}, {
coords: [
@@ -133,20 +121,79 @@ under the License.
[120.5107, 23.2196]
],
lineStyle: {
- normal: {
- curveness: 0.2,
- width: 4,
- opacity: 0.4
- }
+ curveness: 0.2,
+ width: 4,
+ opacity: 0.4
}
}]
}]
}
- myChart.setOption(option);
-
+ var chart = testHelper.create(echarts, 'main0', {
+ option: option
+ });
});
</script>
+
+ <script>
+ require([
+ 'echarts'
+ ], async function (echarts) {
+ var effectPeriod = 3;
+ var option = {
+ xAxis: {
+ type: 'value',
+ min: 0,
+ max: 100,
+ show: false
+ },
+ yAxis: {
+ type: 'value',
+ min: 0,
+ max: 100,
+ inverse: true,
+ show: false
+ },
+ series: {
+ type: 'lines',
+ symbol: ['none', 'none'],
+ symbolSize: 10,
+ effect: {
+ show: true,
+ period: effectPeriod,
+ trailLength: 0,
+ symbol: 'arrow',
+ color: '#FFC12F',
+ symbolSize: 10,
+ },
+ lineStyle: {
+ color: '#000',
+ width: 2,
+ opacity: 0.6,
+ curveness: 0.2
+ },
+ coordinateSystem: 'cartesian2d',
+ data: [
+ {
+ coords: [
+ [10, 43.2],
+ [50, 38]
+ ]
+ }
+ ]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ option: option,
+ title: [
+ 'Effect symbol **SHOULD NOT** flip on unidirectional
loop end when `roundTrip` is not enabled'
+ ]
+ });
+ await new Promise((resolve) => setTimeout(resolve,
effectPeriod * 1e3 / (window.__VRT_INIT__ ? 5 : 1)))
+ chart.getZr().animation.pause()
+ })
+ </script>
</body>
-</html>
\ No newline at end of file
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
