From b2ee72d5586b3141e7346fe99b2b49ddca2bbb45 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Tue, 15 Nov 2022 18:56:24 +0800
Subject: [PATCH] fix(pie): fix `center` may not be converted to the correct
 point when coordinate system is specified due to being normalized to an
 array.

---
 src/chart/pie/pieLayout.ts      |   7 +-
 test/pie-coordinate-system.html | 328 ++++++++++++++++++++------------
 2 files changed, 213 insertions(+), 122 deletions(-)

diff --git a/src/chart/pie/pieLayout.ts b/src/chart/pie/pieLayout.ts
index 0a6998c70c..c5c52ccfcd 100644
--- a/src/chart/pie/pieLayout.ts
+++ b/src/chart/pie/pieLayout.ts
@@ -41,15 +41,13 @@ export function getBasicPieLayout(seriesModel: PieSeriesModel, api: ExtensionAPI
     Pick<SectorShape, 'cx' | 'cy' | 'r' | 'r0'> {
     const viewRect = getViewRect(seriesModel, api);
 
+    // center can be string or number when coordinateSystem is specified
     let center = seriesModel.get('center');
     let radius = seriesModel.get('radius');
 
     if (!zrUtil.isArray(radius)) {
         radius = [0, radius];
     }
-    if (!zrUtil.isArray(center)) {
-        center = [center, center];
-    }
     const width = parsePercent(viewRect.width, api.getWidth());
     const height = parsePercent(viewRect.height, api.getHeight());
     const size = Math.min(width, height);
@@ -66,6 +64,9 @@ export function getBasicPieLayout(seriesModel: PieSeriesModel, api: ExtensionAPI
         cy = point[1] || 0;
     }
     else {
+        if (!zrUtil.isArray(center)) {
+            center = [center, center];
+        }
         cx = parsePercent(center[0], width) + viewRect.x;
         cy = parsePercent(center[1], height) + viewRect.y;
     }
diff --git a/test/pie-coordinate-system.html b/test/pie-coordinate-system.html
index ad0703eddf..969b7685d1 100644
--- a/test/pie-coordinate-system.html
+++ b/test/pie-coordinate-system.html
@@ -31,126 +31,15 @@
         <style>
         </style>
 
-        <div id="main0"></div>
         <div id="main1"></div>
         <div id="main2"></div>
         <div id="main3"></div>
         <div id="main4"></div>
         <div id="main5"></div>
         <div id="main6"></div>
-
-        <script src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
-        <script>
-            require([
-                'echarts',
-                'extension/bmap'
-            ], function (echarts) {
-
-                var option = {
-                    bmap: {
-                        center: [115, 30],
-                        zoom: 5,
-                        roam: true,
-                    },
-                    tooltip: {},
-                    series: [
-                        {
-                            type: 'pie',
-                            name: 'BMap',
-                            coordinateSystem: 'bmap',
-                            radius: 20,
-                            center: [120, 30],
-                            data: [
-                                { value: 1048, name: 'A' },
-                                { value: 735, name: 'B' },
-                                { value: 580, name: 'C' },
-                                { value: 484, name: 'D' },
-                                { value: 300, name: 'E' }
-                            ]
-                        },
-                        {
-                            type: 'pie',
-                            name: 'No CRS',
-                            // coordinateSystem: 'bmap',
-                            radius: 20,
-                            center: [110, 36],
-                            data: [
-                                { value: 1048, name: 'A' },
-                                { value: 735, name: 'B' },
-                                { value: 580, name: 'C' },
-                                { value: 484, name: 'D' },
-                                { value: 300, name: 'E' }
-                            ]
-                        }
-                    ]
-                };
-
-                var chart = testHelper.create(echarts, 'main0', {
-                    title: ['Pie series on BMap'],
-                    option: option,
-                    buttons: [{
-                        text: 'Convert point [120, 30] to pixel',
-                        onclick: function () {
-                            alert(chart.convertToPixel('bmap', [120, 30]));
-                        }
-                    }]
-                });
-            });
-        </script>
-
-        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c0ee23ad2324c26661065de94f5b5676"></script>
-        <script>
-            require([
-                'echarts',
-                'https://fastly.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.js'
-            ], function (echarts) {
-
-                var option = {
-                    amap: {
-                        viewMode: '3d',
-                        center: [115, 30],
-                        zoom: 5
-                    },
-                    tooltip: {},
-                    series: [
-                        {
-                            type: 'pie',
-                            name: 'AMap',
-                            coordinateSystem: 'amap',
-                            radius: 20,
-                            center: [120, 30],
-                            data: [
-                                { value: 1048, name: 'A' },
-                                { value: 735, name: 'B' },
-                                { value: 580, name: 'C' },
-                                { value: 484, name: 'D' },
-                                { value: 300, name: 'E' }
-                            ]
-                        },
-                        {
-                            type: 'pie',
-                            name: 'No CRS',
-                            // coordinateSystem: 'amap',
-                            radius: 20,
-                            center: [110, 36],
-                            data: [
-                                { value: 1048, name: 'A' },
-                                { value: 735, name: 'B' },
-                                { value: 580, name: 'C' },
-                                { value: 484, name: 'D' },
-                                { value: 300, name: 'E' }
-                            ]
-                        }
-                    ]
-                };
-
-                testHelper.create(echarts, 'main1', {
-                    title: ['Pie series on AMap'],
-                    option: option
-                })
-
-            });
-        </script>
+        <div id="main7"></div>
+        <div id="main8"></div>
+        <div id="main9"></div>
 
         <script>
             require([
@@ -205,7 +94,7 @@
                     ]
                 };
 
-                testHelper.create(echarts, 'main2', {
+                testHelper.create(echarts, 'main1', {
                     title: ['Pie series on Calendar'],
                     option: option
                 })
@@ -238,11 +127,25 @@
                                 { value: 484, name: 'D' },
                                 { value: 300, name: 'E' }
                             ]
+                        },
+                        {
+                            type: 'pie',
+                            name: 'Geo',
+                            coordinateSystem: 'geo',
+                            radius: 20,
+                            center: '北京',
+                            data: [
+                                { value: 1048, name: 'A' },
+                                { value: 735, name: 'B' },
+                                { value: 580, name: 'C' },
+                                { value: 484, name: 'D' },
+                                { value: 300, name: 'E' }
+                            ]
                         }
                     ]
                 };
 
-                testHelper.create(echarts, 'main3', {
+                testHelper.create(echarts, 'main2', {
                     title: ['Pie series on Geo Map'],
                     option: option
                 })
@@ -282,7 +185,7 @@
                     ]
                 };
 
-                testHelper.create(echarts, 'main4', {
+                testHelper.create(echarts, 'main3', {
                     title: ['Pie series on Geo SVG'],
                     option: option
                 })
@@ -322,7 +225,7 @@
                     ]
                 };
 
-                testHelper.create(echarts, 'main5', {
+                testHelper.create(echarts, 'main4', {
                     title: ['Pie series on Cartesian2D', 'Category Axes'],
                     option: option
                 })
@@ -370,12 +273,199 @@
                     ]
                 };
 
-                testHelper.create(echarts, 'main6', {
+                testHelper.create(echarts, 'main5', {
                     title: ['Pie series on Cartesian2D', 'category axis & value axis (not perfectly supported)'],
                     option: option
                 })
             });
         </script>
 
+        <script>
+            require([
+                'echarts',
+                'data/usa.json'
+            ], function (echarts, usaJSON) {
+                echarts.registerMap('USA', usaJSON, {
+                    Alaska: {
+                        left: -131,
+                        top: 25,
+                        width: 15
+                    },
+                    Hawaii: {
+                        left: -110,
+                        top: 28,
+                        width: 5
+                    },
+                    'Puerto Rico': {
+                        left: -76,
+                        top: 26,
+                        width: 2
+                    }
+                });
+
+                function randomPieSeries(center, radius) {
+                    const data = ['A', 'B', 'C', 'D'].map((t) => {
+                        return {
+                            value: Math.round(Math.random() * 100),
+                            name: 'Category ' + t
+                        };
+                    });
+                    return {
+                        type: 'pie',
+                        coordinateSystem: 'geo',
+                        tooltip: {
+                            formatter: '{b}: {c} ({d}%)'
+                        },
+                        label: {
+                            show: false
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        animationDuration: 0,
+                        radius,
+                        center,
+                        data
+                    };
+                }
+
+                var option = {
+                    geo: {
+                        map: 'USA',
+                        roam: true,
+                        itemStyle: {
+                            areaColor: '#e7e8ea'
+                        }
+                    },
+                    tooltip: {},
+                    legend: {},
+                    series: [
+                        randomPieSeries([-86.753504, 33.01077], 15),
+                        randomPieSeries([-116.853504, 39.8], 25),
+                        randomPieSeries([-99, 31.5], 30),
+                        // This name string should work
+                        randomPieSeries('Alaska', 20)
+                    ]
+                };
+
+                testHelper.create(echarts, 'main7', {
+                    title: ['Pie series on Geo Map', 'A pie series should be displayed at `**Alaska**`'],
+                    option: option
+                });
+            });
+        </script>
+
+        <script src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
+        <script>
+            require([
+                'echarts',
+                'extension/bmap'
+            ], function (echarts) {
+
+                var option = {
+                    bmap: {
+                        center: [115, 30],
+                        zoom: 5,
+                        roam: true,
+                    },
+                    tooltip: {},
+                    series: [
+                        {
+                            type: 'pie',
+                            name: 'BMap',
+                            coordinateSystem: 'bmap',
+                            radius: 20,
+                            center: [120, 30],
+                            data: [
+                                { value: 1048, name: 'A' },
+                                { value: 735, name: 'B' },
+                                { value: 580, name: 'C' },
+                                { value: 484, name: 'D' },
+                                { value: 300, name: 'E' }
+                            ]
+                        },
+                        {
+                            type: 'pie',
+                            name: 'No CRS',
+                            // coordinateSystem: 'bmap',
+                            radius: 20,
+                            center: [110, 36],
+                            data: [
+                                { value: 1048, name: 'A' },
+                                { value: 735, name: 'B' },
+                                { value: 580, name: 'C' },
+                                { value: 484, name: 'D' },
+                                { value: 300, name: 'E' }
+                            ]
+                        }
+                    ]
+                };
+
+                var chart = testHelper.create(echarts, 'main8', {
+                    title: ['Pie series on BMap'],
+                    option: option,
+                    buttons: [{
+                        text: 'Convert point [120, 30] to pixel',
+                        onclick: function () {
+                            alert(chart.convertToPixel('bmap', [120, 30]));
+                        }
+                    }]
+                });
+            });
+        </script>
+
+        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c0ee23ad2324c26661065de94f5b5676"></script>
+        <script>
+            require([
+                'echarts',
+                'https://fastly.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.js'
+            ], function (echarts) {
+
+                var option = {
+                    amap: {
+                        viewMode: '3d',
+                        center: [115, 30],
+                        zoom: 5
+                    },
+                    tooltip: {},
+                    series: [
+                        {
+                            type: 'pie',
+                            name: 'AMap',
+                            coordinateSystem: 'amap',
+                            radius: 20,
+                            center: [120, 30],
+                            data: [
+                                { value: 1048, name: 'A' },
+                                { value: 735, name: 'B' },
+                                { value: 580, name: 'C' },
+                                { value: 484, name: 'D' },
+                                { value: 300, name: 'E' }
+                            ]
+                        },
+                        {
+                            type: 'pie',
+                            name: 'No CRS',
+                            // coordinateSystem: 'amap',
+                            radius: 20,
+                            center: [110, 36],
+                            data: [
+                                { value: 1048, name: 'A' },
+                                { value: 735, name: 'B' },
+                                { value: 580, name: 'C' },
+                                { value: 484, name: 'D' },
+                                { value: 300, name: 'E' }
+                            ]
+                        }
+                    ]
+                };
+
+                testHelper.create(echarts, 'main9', {
+                    title: ['Pie series on AMap'],
+                    option: option
+                });
+
+            });
+        </script>
     </body>
 </html>