This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-pictorial in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 08fb397c3210a115c952e0f238eb5f7ef4395737 Author: Ovilia <[email protected]> AuthorDate: Wed Dec 4 17:36:05 2024 +0800 fix(pictorial): fix zero value flipping for different axes --- src/chart/bar/PictorialBarView.ts | 4 +- test/pictorial-zero-value.html | 102 ++++++++++++++++++++++++++------------ 2 files changed, 73 insertions(+), 33 deletions(-) diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts index 0872d7b62..d834bffc0 100644 --- a/src/chart/bar/PictorialBarView.ts +++ b/src/chart/bar/PictorialBarView.ts @@ -341,7 +341,9 @@ function prepareBarLength( // if 'pxSign' means sign of pixel, it can't be zero, or symbolScale will be zero // and when borderWidth be settled, the actual linewidth will be NaN - outputSymbolMeta.pxSign = boundingLength >= 0 ? 1 : -1; + outputSymbolMeta.pxSign = (valueDim.xy === 'x' !== valueAxis.inverse) + ? boundingLength >= 0 ? 1 : -1 + : boundingLength > 0 ? 1 : -1; } function convertToCoordOnAxis(axis: Axis2D, value: number) { diff --git a/test/pictorial-zero-value.html b/test/pictorial-zero-value.html index 7a7b92489..aa42e541b 100644 --- a/test/pictorial-zero-value.html +++ b/test/pictorial-zero-value.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file @@ -17,34 +18,42 @@ specific language governing permissions and limitations under the License. --> + <html> <head> - <meta charset="utf-8" /> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="lib/simpleRequire.js"></script> <script src="lib/config.js"></script> - <script src="data/pie-texture.js"></script> - <script src="lib/dat.gui.min.js"></script> - <link rel="stylesheet" href="lib/reset.css" /> + <script src="lib/jquery.min.js"></script> + <script src="lib/facePrint.js"></script> <script src="lib/testHelper.js"></script> + <!-- <script src="ut/lib/canteen.js"></script> --> + <link rel="stylesheet" href="lib/reset.css" /> </head> <body> - <style></style> + <style> + </style> + + - <div id="main"></div> + <div id="main0"></div> + <div id="main1"></div> <div id="main2"></div> <div id="main3"></div> + <div id="main4"></div> - <script> - var chart; - require(["echarts"], function (echarts) { - var chartDom = document.getElementById("main"); - var myChart = echarts.init(chartDom); - var option; - var pathSymbols = { - reindeer: - "path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.0 [...] + <script> + require([ + 'echarts', + // 'map/js/china', + // './data/nutrients.json' + ], function (echarts) { + var pathSymbols = { + reindeer: + "path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1 [...] plane: "path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934 [...] train: "path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0. [...] ship: "path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h- [...] @@ -165,23 +174,51 @@ under the License. ], }; - option && myChart.setOption(option); + var chart = testHelper.create(echarts, 'main0', { + title: [ + 'Test Case Description of main0', + '(Muliple lines and **emphasis** are supported in description)' + ], + option: option + // height: 300, + // buttons: [{text: 'btn-txt', onclick: function () {}}], + // recordCanvas: true, }); + }); </script> + + <script> - require(['echarts'], function (echarts) { + require([ + 'echarts', + // 'map/js/china', + // './data/nutrients.json' + ], function (echarts) { + const valueAxis = { + type: 'value', + boundaryGap: [0, 0.01] + }; + const catAxis = { + type: 'category', + data: ['Brazil', 'Indonesia'] + }; + for (let i = 1; i <= 4; ++i) { + const xAxis = (i === 1 || i === 2) + ? {...valueAxis} + : {...catAxis}; + xAxis.inverse = i === 2; + + const yAxis = (i === 1 || i === 2) + ? {...catAxis} + : {...valueAxis}; + yAxis.inverse = i === 3; + option = { - xAxis: { - type: 'value', - boundaryGap: [0, 0.01] - }, - yAxis: { - type: 'category', - data: ['Brazil', 'Indonesia'] - }, + xAxis, + yAxis, series: [ { name: '2011', @@ -190,9 +227,9 @@ under the License. }, { type: 'pictorialBar', - symbolPosition: 'end', + symbolPosition: 'start', symbolSize: 40, - symbolOffset: [2, 0], + // symbolOffset: [2, 0], zlevel: 2, data: [ { @@ -210,16 +247,17 @@ under the License. ] }; - - var chart = testHelper.create(echarts, 'main3', { + var chart = testHelper.create(echarts, 'main' + i, { title: [ 'Image should not be flipped when data is 0.', + (i < 3 ? 'horizontal' : 'vertical') + + ((xAxis.inverse || yAxis.inverse) ? ', inversed' : '') ], option: option }); - - }); - + } + }); </script> + </body> </html> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
