You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2022/07/07 03:29:01 UTC
[echarts] 01/01: fix(axis): fix axis symbol is not reverted when axis is reverse.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix/axis-line-symbol
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit f78ba26bd032ca686742b52e9b5edbaf832394b3
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Thu Jul 7 11:24:43 2022 +0800
fix(axis): fix axis symbol is not reverted when axis is reverse.
---
src/component/axis/AxisBuilder.ts | 11 ++++--
test/axis-arrow.html | 70 +++++++++++++++++++++++++++++++--------
2 files changed, 65 insertions(+), 16 deletions(-)
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index 5ed1ed3f6..76c492408 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -253,8 +253,9 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
const extent = axisModel.axis.getExtent();
const matrix = transformGroup.transform;
- const pt1 = [extent[0], 0];
- const pt2 = [extent[1], 0];
+ let pt1 = [extent[0], 0];
+ let pt2 = [extent[1], 0];
+ const inverse = pt1[0] > pt2[0];
if (matrix) {
v2ApplyTransform(pt1, pt1, matrix);
v2ApplyTransform(pt2, pt2, matrix);
@@ -303,6 +304,12 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
const symbolWidth = arrowSize[0];
const symbolHeight = arrowSize[1];
+ // if axis is reverse, arrow should be inverted
+ if (inverse) {
+ const tmp = pt1;
+ pt1 = pt2;
+ pt2 = tmp;
+ }
each([{
rotate: opt.rotation + Math.PI / 2,
offset: arrowOffset[0],
diff --git a/test/axis-arrow.html b/test/axis-arrow.html
index 4194631f7..d6a4a5def 100644
--- a/test/axis-arrow.html
+++ b/test/axis-arrow.html
@@ -23,19 +23,18 @@ under the License.
<meta charset="utf-8">
<script src="lib/simpleRequire.js"></script>
<script src="lib/config.js"></script>
+ <script src="lib/testHelper.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
- html, body, #main, .chart {
- width: 100%;
- }
-
- .chart {
- height: 300px;
+ .test-title[title=null] {
+ display: none;
}
</style>
- <div id="main"></div>
+ <div id="main0"></div>
+ <div id="main1"></div>
<script>
require([
@@ -57,7 +56,7 @@ under the License.
}]
}, {
title: {
- text: 'x: ["none", "arrow"]; y: "arrow" of size 30x20'
+ text: 'x: ["none", "arrow"] symbolOffset: 10; y: "arrow" of size 30x20 symbolOffset: [-10, 10]'
},
xAxis: {
data: ['a', 'b', 'c', 'd', 'e'],
@@ -71,6 +70,7 @@ under the License.
},
yAxis: {
axisLine: {
+ show: true,
symbol: 'arrow',
symbolSize: [30, 20],
symbolOffset: [-10, 10]
@@ -82,7 +82,7 @@ under the License.
}]
}, {
title: {
- text: 'x: "none"; y: ["none", "arrow"], inversed'
+ text: 'x: "none"; y: ["none", "arrow"] symbolOffset: [10, -10] inversed '
},
xAxis: {
data: ['a', 'b', 'c', 'd', 'e'],
@@ -92,10 +92,11 @@ under the License.
},
yAxis: {
axisLine: {
+ show: true,
symbol: ['none', 'arrow'],
symbolOffset: [10, -10]
},
- inversed: true
+ inverse: true
},
series: [{
type: 'line',
@@ -103,18 +104,59 @@ under the License.
}]
}];
- var main = document.getElementById('main');
+ var main = document.getElementById('main0');
for (var i = 0; i < options.length; ++i) {
var container = document.createElement('div');
- container.setAttribute('class', 'chart');
main.appendChild(container);
- var chart = echarts.init(container);
- chart.setOption(options[i]);
+ testHelper.create(echarts, container, {
+ option: options[i]
+ });
}
});
</script>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ dataset: {
+ source: [
+ ['水果', '价格'],
+ ['苹果', 1],
+ ['香蕉', 0.5],
+ ['梨', 2],
+ ['菠萝', 4]
+ ]
+ },
+ xAxis: [{
+ type: 'category',
+ inverse: true,
+ axisLine: {
+ symbol: 'arrow'
+ }
+ }],
+ yAxis: {
+ inverse: true,
+ axisLine: {
+ show: true,
+ symbol: 'arrow'
+ }
+ },
+ series: [{
+ type: 'bar'
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'The arrows of axis line should be inverted when the axis is inverse',
+ 'Case from https://github.com/apache/echarts/issues/17325'
+ ],
+ option: option
+ });
+ })
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org