You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "plainheart (via GitHub)" <gi...@apache.org> on 2023/02/22 12:07:39 UTC

[GitHub] [echarts] plainheart commented on a diff in pull request #18240: fix(sunburst): `radial` rotation label might upside down

plainheart commented on code in PR #18240:
URL: https://github.com/apache/echarts/pull/18240#discussion_r1114234404


##########
src/chart/sunburst/SunburstPiece.ts:
##########
@@ -251,8 +252,8 @@ class SunburstPiece extends graphic.Sector {
             const rotateType = getLabelAttr(labelStateModel, 'rotate');
             let rotate = 0;
             if (rotateType === 'radial') {
-                rotate = -midAngle;
-                if (rotate < -Math.PI / 2) {
+                rotate = normalizeRadian(-midAngle);
+                if (((rotate > Math.PI / 2 && rotate <= Math.PI) || (rotate > Math.PI && rotate <= Math.PI * 1.5))) {

Review Comment:
   It seems these two conditions can be merged into one condition. WDYT?
   
   ```ts
   rotate > Math.PI / 2 && rotate <= Math.PI * 1.5
   ```



##########
test/sunburst-label.html:
##########
@@ -112,6 +114,120 @@
         });
         </script>
 
+    <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var chart = echarts.init(document.getElementById('main1'));
+
+            var data = [
+                {
+                    name: 'Grandpa',
+                    children: [
+                        {
+                            name: 'Uncle Leo',
+                            value: 15,
+                            children: [
+                                {
+                                    name: 'Cousin Jack',
+                                    value: 2
+                                },
+                                {
+                                    name: 'Cousin Mary',
+                                    value: 5,
+                                    children: [
+                                        {
+                                            name: 'Jackson',
+                                            value: 2
+                                        }
+                                    ]
+                                },
+                                {
+                                    name: 'Cousin Ben',
+                                    value: 4
+                                }
+                            ]
+                        },
+                        {
+                            name: 'Father',
+                            value: 10,
+                            children: [
+                                {
+                                    name: 'Me',
+                                    value: 5
+                                },
+                                {
+                                    name: 'Brother Peter',
+                                    value: 1
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Nancy',
+                    children: [
+                        {
+                            name: 'Uncle Nike',
+                            children: [
+                                {
+                                    name: 'Cousin Betty',
+                                    value: 1
+                                },
+                                {
+                                    name: 'Cousin Jenny',
+                                    value: 2
+                                }
+                            ]
+                        }
+                    ]
+                }
+
+            ];
+            option = {
+                series: {
+                    type: 'sunburst',
+                    startAngle: 0,
+                    // emphasis: {
+                    //     focus: 'ancestor'
+                    // },
+                    data: data,
+                    radius: [0, '90%'],
+                    label: {
+                        rotate: 'radial'
+                    }
+                }
+            };
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Label rotation under different startAngle '
+                ],
+                option: option,
+                height: 600,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+
+            var config = {
+                startAngle: 0
+            };
+
+            function update() {
+                chart.setOption({
+                    series: [{
+                        startAngle: config.startAngle
+                    }]
+                });
+            }
+
+            var gui = new dat.GUI();
+                gui.add(config, 'startAngle', 0, 360)

Review Comment:
   As per https://github.com/apache/echarts/issues/18023#issuecomment-1337952610, it's better to also add `clockwise`.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org