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
The following commit(s) were added to refs/heads/master by this push:
new 184d935 fix(polor): polar bar negative clipping #12109 (#12418)
184d935 is described below
commit 184d9354b4d8ff8b11c1a4c99e2bbd88a2e2fcca
Author: Grace <[email protected]>
AuthorDate: Thu May 28 11:12:11 2020 +0800
fix(polor): polar bar negative clipping #12109 (#12418)
---
src/chart/bar/BarView.js | 27 +++++-
src/layout/barPolar.js | 6 +-
test/bar-polar-stack.html | 218 ++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 247 insertions(+), 4 deletions(-)
diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
index e100870..0844f3c 100644
--- a/src/chart/bar/BarView.js
+++ b/src/chart/bar/BarView.js
@@ -348,8 +348,31 @@ var clip = {
return clipped;
},
- polar: function (coordSysClipArea) {
- return false;
+ polar: function (coordSysClipArea, layout) {
+ var signR = layout.r0 <= layout.r ? 1 : -1;
+ // Make sure r is larger than r0
+ if (signR < 0) {
+ var r = layout.r;
+ layout.r = layout.r0;
+ layout.r0 = r;
+ }
+
+ var r = mathMin(layout.r, coordSysClipArea.r);
+ var r0 = mathMax(layout.r0, coordSysClipArea.r0);
+
+ layout.r = r;
+ layout.r0 = r0;
+
+ var clipped = r - r0 < 0;
+
+ // Reverse back
+ if (signR < 0) {
+ var r = layout.r;
+ layout.r = layout.r0;
+ layout.r0 = r;
+ }
+
+ return clipped;
}
};
diff --git a/src/layout/barPolar.js b/src/layout/barPolar.js
index 2aebd93..50fea41 100644
--- a/src/layout/barPolar.js
+++ b/src/layout/barPolar.js
@@ -82,8 +82,9 @@ function barLayoutPolar(seriesType, ecModel, api) {
var clampLayout = baseAxis.dim !== 'radius'
|| !seriesModel.get('roundCap', true);
- var valueAxisStart = valueAxis.getExtent()[0];
-
+ var valueAxisStart = valueAxis.dim === 'radius'
+ ? valueAxis.dataToRadius(0)
+ : valueAxis.dataToAngle(0);
for (var idx = 0, len = data.count(); idx < len; idx++) {
var value = data.get(valueDim, idx);
var baseValue = data.get(baseDim, idx);
@@ -95,6 +96,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
// stackResultDimension directly.
// Only ordinal axis can be stacked.
if (stacked) {
+
if (!lastStackCoords[stackId][baseValue]) {
lastStackCoords[stackId][baseValue] = {
p: valueAxisStart, // Positive stack
diff --git a/test/bar-polar-stack.html b/test/bar-polar-stack.html
index 2b114da..4984120 100644
--- a/test/bar-polar-stack.html
+++ b/test/bar-polar-stack.html
@@ -32,11 +32,24 @@ under the License.
height: 100%;
margin: 0;
}
+ html, body, .test-chart {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
#main {
background: #fff;
}
</style>
<div id="main"></div>
+ <h1>polar negative</h1>
+ <div id="polar-negative" class="test-chart"></div>
+ <h1>polar min negative</h1>
+ <div id="polar-min-negative" class="test-chart"></div>
+ <h1>polar max negative</h1>
+ <div id="polar-max-negative" class="test-chart"></div>
+ <h1>polar radius min > 0</h1>
+ <div id="polar-radius-min-positive" class="test-chart"></div>
<script>
require([
@@ -58,6 +71,7 @@ under the License.
z: 10
},
polar: {
+ radius: [50, 200]
},
series: [{
type: 'bar',
@@ -91,5 +105,209 @@ under the License.
window.onresize = chart.resize;
});
</script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var chart =
echarts.init(document.getElementById('polar-negative'), null, {});
+
+ var data = [];
+
+ chart.setOption({
+ angleAxis: {
+ type: 'category',
+ data: ['S1', 'S2', 'S3']
+ },
+ radiusAxis: {
+ min:-1,
+ max: 3
+ },
+ polar: {
+ radius: [50, 200]
+ },
+ series: [{
+ type: 'bar',
+ data: [1, 1, 1],
+ coordinateSystem: 'polar',
+ itemStyle:{
+ color:"blue"
+ },
+ name: 'A',
+ stack: 'a'
+ }, {
+ type: 'bar',
+ data: [1, 1, 1],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a'
+ }, {
+ type: 'bar',
+ data: [1, 1, 1],
+ coordinateSystem: 'polar',
+ name: 'C',
+ stack: 'a'
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B', 'C']
+ }
+ });
+ })
+ </script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var chart =
echarts.init(document.getElementById('polar-min-negative'), null, {});
+
+ var data = [];
+
+ chart.setOption({
+ angleAxis: {
+ type: 'category',
+ data: ['S1', 'S2', 'S3']
+ },
+ radiusAxis: {
+ min: -3,
+ max: 1
+ },
+ polar: {
+ radius: [50, 200]
+ },
+ series: [{
+ type: 'bar',
+ data: [-2, 1, 1],
+ coordinateSystem: 'polar',
+ itemStyle:{
+ color:"blue"
+ },
+ name: 'A',
+ stack: 'a'
+ }, {
+ type: 'bar',
+ data: [-1, 1, 1],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a'
+ }, {
+ type: 'bar',
+ data: [1, 1, 1],
+ coordinateSystem: 'polar',
+ name: 'C',
+ stack: 'a'
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B', 'C']
+ }
+ });
+ })
+ </script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var chart =
echarts.init(document.getElementById('polar-max-negative'), null, {});
+
+ var data = [];
+
+ chart.setOption({
+ angleAxis: {
+ type: 'category',
+ data: ['S1', 'S2', 'S3']
+ },
+ radiusAxis: {
+ min: -6,
+ max: -1
+ },
+ polar: {
+ radius: [50, 200]
+ },
+ series: [{
+ type: 'bar',
+ data: [-2, 1, 1],
+ coordinateSystem: 'polar',
+ itemStyle:{
+ color:"blue"
+ },
+ name: 'A',
+ stack: 'a'
+ }, {
+ type: 'bar',
+ data: [-1, 1, 1],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a'
+ }, {
+ type: 'bar',
+ data: [1, 1, 1],
+ coordinateSystem: 'polar',
+ name: 'C',
+ stack: 'a'
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B', 'C']
+ }
+ });
+ })
+ </script>
+
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var chart =
echarts.init(document.getElementById('polar-radius-min-positive'), null, {});
+
+ var data = [];
+
+ chart.setOption({
+ angleAxis: {
+ type: 'category',
+ data: ['S1', 'S2', 'S3']
+ },
+ radiusAxis: {
+ min: 1,
+ max: 6
+ },
+ polar: {
+ radius: [50, 200]
+ },
+ series: [{
+ type: 'bar',
+ data: [2, 2, 2],
+ coordinateSystem: 'polar',
+ itemStyle:{
+ color:"blue"
+ },
+ name: 'A',
+ stack: 'a'
+ },
+ {
+ type: 'bar',
+ data: [2, 2, 2],
+ coordinateSystem: 'polar',
+ name: 'B',
+ stack: 'a'
+ },
+ {
+ type: 'bar',
+ data: [2, 2, 2],
+ coordinateSystem: 'polar',
+ name: 'C',
+ stack: 'a'
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B', 'C']
+ }
+ });
+ })
+
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
