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 <dar...@foxmail.com> 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: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org