From 91739bbe8a5aba007ee99da795ce1fc450baf96c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E7=A7=8B=E5=8D=8A=E5=A4=8F?=
 <yin_chunyang@163.com>
Date: Wed, 10 Sep 2025 15:41:42 +0800
Subject: [PATCH 1/4] feat(pie):add `tangential-fixed` rotation mode to keep
 labels tangential without flipping. close #21257

---
 src/chart/pie/PieSeries.ts   | 2 +-
 src/chart/pie/labelLayout.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 0521d00e50..99fdbdff6b 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -68,7 +68,7 @@ export interface PieStateOption<TCbParams = never> {
     labelLine?: PieLabelLineOption
 }
 interface PieLabelOption extends Omit<SeriesLabelOption, 'rotate' | 'position'> {
-    rotate?: number | boolean | 'radial' | 'tangential'
+    rotate?: number | boolean | 'radial' | 'tangential' | 'tangential-fixed'
     alignTo?: 'none' | 'labelLine' | 'edge'
     edgeDistance?: string | number
     /**
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index b99d118577..5ea2ce031e 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -484,7 +484,7 @@ export default function pieLabelLayout(
             const radialAngle = nx < 0 ? -midAngle + PI : -midAngle;
             labelRotate = radialAngle;
         }
-        else if (rotate === 'tangential'
+        else if (rotate === 'tangential' || rotate === 'tangential-fixed'
             && labelPosition !== 'outside' && labelPosition !== 'outer'
         ) {
             let rad = Math.atan2(nx, ny);
@@ -492,7 +492,7 @@ export default function pieLabelLayout(
                 rad = PI * 2 + rad;
             }
             const isDown = ny > 0;
-            if (isDown) {
+            if (isDown && rotate !== 'tangential-fixed') {
                 rad = PI + rad;
             }
             labelRotate = rad - PI;

From f2570e740b72c9f05d99d087d2435d989f2d7a7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E7=A7=8B=E5=8D=8A=E5=A4=8F?=
 <yin_chunyang@163.com>
Date: Wed, 10 Sep 2025 16:14:24 +0800
Subject: [PATCH 2/4] feat(pie):add `tangential-fixed` rotation mode to keep
 labels tangential without flipping

---
 test/pie-label-rotate.html | 52 ++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/test/pie-label-rotate.html b/test/pie-label-rotate.html
index 91ecea316a..5c4b47374c 100644
--- a/test/pie-label-rotate.html
+++ b/test/pie-label-rotate.html
@@ -39,7 +39,8 @@ <h3>Pie series label rotate</h3>
         <script>
             var chart;
             var series = [];
-
+            var iconBase64CS = `data:image/png;base64,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`
+            var iconBase64CQ = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAG40lEQVR4AbRWC3BMVxj+72bjmceGpdskZAm6iWhDjVLEZcrQR6zXGCMsSuigCKoh2DG0DIIOSpJKTE2rOtEMQzUeWaT1qCmtsVKlMsQ7kk0kESOP/t/J3nV3s0mqM93Jd85//tf57n9e0VAjP6tMRvqff14JJMkkJ5v9b4eFBZ9ZJtNNjF+WB8dYkSPdEnwPORr6mHoEOFAODwv+dq5lVGic+R3D8rlxWoxZb/23JNg3Z9y7MbKSI/GjCX4BOv/T3uLrEaglsox/f7DL10ejCZ0QO6RqhNzHwombJME+OQumjTFEdjUOUpI0b+arHyH3rVwu0xTy+NUj0DMyfIqv1scAP41pFEmt9AQSb/bopjWFdxzJE8iweQPbcuZYzMYA/9Ym2BELQA4Lae+Hj4OshhsBTiB379b5OhwwucZkJs2ARBeJ0cMHGjhJOuye4FgrV87UVhcgNq6kN5HPsI2ueHwUL6XJM86NgEQkgol/UscB3JKYXCGBJHHmoVU8WY4C3mDpACefaQrvIConJmfixD9UQOo4kCUiX632vtXjZGmERdUEBbbWYohA9ABkyWSGSJ06vNJi6eyJppXzJstJc+O6LJs9cXjCtDF943jDCgdufJyTsyj+QAhCpw4GXZXqI6FzI8DlNfq1aumnBMABqK0opNpbuRDFfkAlMMDegKysOXRATV4WuhfgfYSBr6/WgV4NNwKKQWrVThGptjCPqrMXit6lbEKoyfuB6pFwxqiXGSqvBGorHsEmklTnfi7kl21AQhDn6knOCiAHVzkfvQKvBIiDMDGSKI7/pcfS1fAHNFQN5KxHoKziaRkCUXo4eELTazppnLtabcO+weZDr9YjV2Mf4klgEDahOoFaRinF5PrX1GqX7Dm5y+AU9LpASG4XmYsAn2u5b69IA65NeHnDo7v5VJVloZrf0uqZUTHYrl6wUaGjrJ4dimBDW30bnf+HkBW4CPDmsAzp11OnGNBLVc3QUVrWzwKpWb9QXv59ofPWnL50g3IZ8IOMeEDxxbH1fBNcBJQ3QJSZ3wBtfjT5FEQKzODHabq5PyVOGUYmo4E0bMd646oFlH0xMDqcFL+YqAgRixzaopi6a5n3Di6yGqKVCilBAK8U3gCsoUho4ltvGldq7Dgi7qU+k8XGw8Ra824mYBaVSFm7mIA/H1YTSIhYngR+iEEsKTn4KMJH2z4ytK3OX+tGAIPmvtoyBEIWCAggCg2tewuQFLsfxISRaM+GBDp1IENg54qpQiuq5/QTm9WZQxidjcRvTFCgBwFef2Ogf6sWxCydfk1285P3U0RvWWDmKq8PpNccEt+y6kdJLAE8n1dXt5CaIIBTAF+gXbCRktJyBEAEOgBVQd8QcMs+fFysV+wKAduFy9cqcZQUg7ceyVFuHDXImTusBCjj1dNf/CflLV7RFTmehFptlE/8EwRW28h2I/+OQ3nxWO/1b8wsK8XEWsjOZ/3Ugd10mnH1wkneB7uFP5YiJnaKkBtqSu9e+4uXPEOxCwIYFBaV7Lxy/pgdVyfGDQHlBhGUf/Phm2IJlImxLIi7eclGR3Yspv3rprrguJ9PyH0obVU5v4h1jNnZRcCHyJZz9Ehp2R+ZhawnJAEuHnGRhbpRYBJMDKfhs9bT6CXpFLvgS4Hs1ERy5G67n3fjlgMVhw/gIoA1KS4qmZC6dtHt1PiomsryEtL4aKlNSBdK+3ggnciwwr9RnMncQpi4U+deRPYrwlf7sJC0zVrQyAXba3elZxgkop3C4GxcBDC22ii/uKTs2QeffP0sov9ICusxQGDaphzqFC2LcsLPG1Cpt8yzX5gC+OEpLSWy24WuuV+QNGfX5Uf6sIh5QuFsNM5edEkyyf3HJegMXXq2FApng0qAQMQAM2Eip9qt0xmMbmMxcfZPfJmFEAkiV6j585p2r3aJdqgd3QhIRMaImNGVage13K330JoTu5J4E6u1dXIQEzi3f0vdAOUHCgqIsrO5Crwckd2JAgKoIO/XqDqnutaNAGf2+Iw6J6WteFpR/vjBneK1sYF2YN/Ctx17E/qVpk4KcaTEv/4oN3NrmW1v8gPCZHyNK3GYGPKR7Qvziu5cnwRZgZqA7uh1Or93jaVDWsJQR+aGmaUljx9UXDy+rwTOOFJLR7R7cPxv+ibxYGkKMD75jHXCprMr4vfctS45+GTNZycp6eB3X+V9v2Nh+a03Iu/R/AVEjLLQkOLURe/dTNuWnM0nAEsQzTnFx6oJOM4V0OFP997Qz9h0LOj3QynzNow1rN+/evzm5YMlG6/94K1nqev5AprLwai1VyRn2WX7j2lRqfFRKUmDpQxg3cigL+I3Hu6caSdswEscD4ib8B8AAAD//y8IRf8AAAAGSURBVAMAe4KId9XWdcEAAAAASUVORK5CYII=`
             function run() {
                 setInterval(function () {
                     for (var i = 0; i < series.length; ++i) {
@@ -63,6 +64,7 @@ <h3>Pie series label rotate</h3>
                         undefined,
                         'radial',
                         'tangential',
+                        'tangential-fixed',
                         30
                     ];
 
@@ -74,6 +76,43 @@ <h3>Pie series label rotate</h3>
                     for (var rot = 0; rot < 2; ++rot) {
                         for (var i = 0; i < rows; ++i) {
                             for (var j = 0; j < cols; ++j) {
+                                let label = {
+                                    show: true,
+                                    position: positions[i],
+                                    rotate: rotates[j],
+                                    formatter: 'value: {c}',
+                                    borderColor: '#0ff',
+                                    borderWidth: 2
+                                }
+                                if(rotates[j] === 'tangential-fixed'){
+                                    label = {
+                                        show: true,
+                                        position: positions[i],
+                                        rotate: rotates[j],
+                                        formatter: (par)=>{
+                                            if(par.dataIndex % 2 === 0){
+                                                return `{iconCS|}`
+                                            }
+                                            return `{iconCQ|}`
+                                        },
+                                        rich:{
+                                            iconCS:{
+                                                width:24,
+                                                height:24,
+                                                backgroundColor:{
+                                                    image:iconBase64CS
+                                                }
+                                            },
+                                            iconCQ:{
+                                                width:24,
+                                                height:24,
+                                                backgroundColor:{
+                                                    image:iconBase64CQ
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
                                 series.push({
                                     type: 'pie',
                                     data: [
@@ -82,14 +121,7 @@ <h3>Pie series label rotate</h3>
                                         2.4,
                                         3.6
                                     ],
-                                    label: {
-                                        show: true,
-                                        position: positions[i],
-                                        rotate: rotates[j],
-                                        formatter: 'value: {c}',
-                                        borderColor: '#0ff',
-                                        borderWidth: 2
-                                    },
+                                    label,
                                     labelLayout: {
                                         hideOverlap: false
                                     },
@@ -103,7 +135,7 @@ <h3>Pie series label rotate</h3>
                                         100 / rows / 2 * 0.6 + '%'
                                     ]
                                 });
-                                var rotText = j === 3 ? '30°' : rotates[j];
+                                var rotText = j === 4 ? '30°' : rotates[j];
                                 title.push({
                                     text: 'startAngle: ' + (rot ? 0 : 90) + '\n' + positions[i] + ', rotate: ' + rotText,
                                     left: 100 / cols * (j + 0.5) + '%',

From 37649a536d5baf847ee5364ae3a94fe319ed741b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E7=A7=8B=E5=8D=8A=E5=A4=8F?= <2646403766@qq.com>
Date: Sat, 11 Oct 2025 09:45:25 +0800
Subject: [PATCH 3/4] fix(pie):rename tangential-fixed rotation mode to
 tangential-noflip for clearer semantics

---
 src/chart/pie/PieSeries.ts   |   2 +-
 src/chart/pie/labelLayout.ts |   4 +-
 test/pie-label-rotate.html   | 233 +++++++++++++++--------------------
 3 files changed, 104 insertions(+), 135 deletions(-)

diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 99fdbdff6b..496d9a5e6a 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -68,7 +68,7 @@ export interface PieStateOption<TCbParams = never> {
     labelLine?: PieLabelLineOption
 }
 interface PieLabelOption extends Omit<SeriesLabelOption, 'rotate' | 'position'> {
-    rotate?: number | boolean | 'radial' | 'tangential' | 'tangential-fixed'
+    rotate?: number | boolean | 'radial' | 'tangential' | 'tangential-noflip'
     alignTo?: 'none' | 'labelLine' | 'edge'
     edgeDistance?: string | number
     /**
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 5ea2ce031e..e617e61895 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -484,7 +484,7 @@ export default function pieLabelLayout(
             const radialAngle = nx < 0 ? -midAngle + PI : -midAngle;
             labelRotate = radialAngle;
         }
-        else if (rotate === 'tangential' || rotate === 'tangential-fixed'
+        else if (rotate === 'tangential' || rotate === 'tangential-noflip'
             && labelPosition !== 'outside' && labelPosition !== 'outer'
         ) {
             let rad = Math.atan2(nx, ny);
@@ -492,7 +492,7 @@ export default function pieLabelLayout(
                 rad = PI * 2 + rad;
             }
             const isDown = ny > 0;
-            if (isDown && rotate !== 'tangential-fixed') {
+            if (isDown && rotate !== 'tangential-noflip') {
                 rad = PI + rad;
             }
             labelRotate = rad - PI;
diff --git a/test/pie-label-rotate.html b/test/pie-label-rotate.html
index 5c4b47374c..dd039c3dc4 100644
--- a/test/pie-label-rotate.html
+++ b/test/pie-label-rotate.html
@@ -19,143 +19,112 @@
 -->
 
 <html>
-    <head>
-        <meta charset="utf-8">
-        <script src="lib/simpleRequire.js"></script>
-        <script src="lib/config.js"></script>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    </head>
-    <body>
-        <style>
-            #main0 {
-                width: 100%;
-                height: 2000px;
-                margin: 20px 0;
-            }
-        </style>
-        <h3>Pie series label rotate</h3>
-        <button onclick="run()">Run</button>
-        <div id="main0"></div>
-        <script>
-            var chart;
-            var series = [];
-            var iconBase64CS = `data:image/png;base64,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`
-            var iconBase64CQ = `data:image/png;base64,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`
-            function run() {
-                setInterval(function () {
-                    for (var i = 0; i < series.length; ++i) {
-                        for (var j = 0; j < series[i].data.length; ++j) {
-                            series[i].data[j] = Math.floor(Math.random() * 100) / 10;
-                        }
-                        series[i].startAngle = Math.random() * 360 - 180;
-                    }
-                    chart.setOption({
-                        series: series
-                    });
-                }, 4000);
+<head>
+    <meta charset="utf-8">
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body>
+<style>
+    #main0 {
+        width: 100%;
+        height: 2000px;
+        margin: 20px 0;
+    }
+</style>
+<h3>Pie series label rotate</h3>
+<button onclick="run()">Run</button>
+<div id="main0"></div>
+<script>
+    var chart;
+    var series = [];
+
+    function run() {
+        setInterval(function () {
+            for (var i = 0; i < series.length; ++i) {
+                for (var j = 0; j < series[i].data.length; ++j) {
+                    series[i].data[j] = Math.floor(Math.random() * 100) / 10;
+                }
+                series[i].startAngle = Math.random() * 360 - 180;
             }
+            chart.setOption({
+                series: series
+            });
+        }, 4000);
+    }
 
-            require(['echarts'], function (echarts) {
-                function setPieChart() {
-                    var positions = [
-                        'inner', 'center', 'outside'
-                    ];
-                    var rotates = [
-                        undefined,
-                        'radial',
-                        'tangential',
-                        'tangential-fixed',
-                        30
-                    ];
+    require(['echarts'], function (echarts) {
+        function setPieChart() {
+            var positions = [
+                'inner', 'center', 'outside'
+            ];
+            var rotates = [
+                undefined,
+                'radial',
+                'tangential',
+                'tangential-noflip',
+                30
+            ];
 
-                    chart = echarts.init(document.getElementById('main0'));
-                    var rows = positions.length;
-                    var cols = rotates.length;
+            chart = echarts.init(document.getElementById('main0'));
+            var rows = positions.length;
+            var cols = rotates.length;
 
-                    var title = [];
-                    for (var rot = 0; rot < 2; ++rot) {
-                        for (var i = 0; i < rows; ++i) {
-                            for (var j = 0; j < cols; ++j) {
-                                let label = {
-                                    show: true,
-                                    position: positions[i],
-                                    rotate: rotates[j],
-                                    formatter: 'value: {c}',
-                                    borderColor: '#0ff',
-                                    borderWidth: 2
-                                }
-                                if(rotates[j] === 'tangential-fixed'){
-                                    label = {
-                                        show: true,
-                                        position: positions[i],
-                                        rotate: rotates[j],
-                                        formatter: (par)=>{
-                                            if(par.dataIndex % 2 === 0){
-                                                return `{iconCS|}`
-                                            }
-                                            return `{iconCQ|}`
-                                        },
-                                        rich:{
-                                            iconCS:{
-                                                width:24,
-                                                height:24,
-                                                backgroundColor:{
-                                                    image:iconBase64CS
-                                                }
-                                            },
-                                            iconCQ:{
-                                                width:24,
-                                                height:24,
-                                                backgroundColor:{
-                                                    image:iconBase64CQ
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                                series.push({
-                                    type: 'pie',
-                                    data: [
-                                        2,
-                                        1.2,
-                                        2.4,
-                                        3.6
-                                    ],
-                                    label,
-                                    labelLayout: {
-                                        hideOverlap: false
-                                    },
-                                    center: [
-                                        100 / cols * (j + 0.5) + '%',
-                                        100 / rows / 2 * (i + 0.5 + rot * 3) + '%'
-                                    ],
-                                    startAngle: rot ? 90 : 0,
-                                    radius: [
-                                        30,
-                                        100 / rows / 2 * 0.6 + '%'
-                                    ]
-                                });
-                                var rotText = j === 4 ? '30°' : rotates[j];
-                                title.push({
-                                    text: 'startAngle: ' + (rot ? 0 : 90) + '\n' + positions[i] + ', rotate: ' + rotText,
-                                    left: 100 / cols * (j + 0.5) + '%',
-                                    top: 100 / rows / 2 * (i + 0.85 + rot * 3) + '%',
-                                    textAlign: 'center'
-                                });
-                            }
-                        }
+            var title = [];
+            for (var rot = 0; rot < 2; ++rot) {
+                for (var i = 0; i < rows; ++i) {
+                    for (var j = 0; j < cols; ++j) {
+                        series.push({
+                            type: 'pie',
+                            data: [
+                                2,
+                                1.2,
+                                2.4,
+                                3.6
+                            ],
+                            label: {
+                                show: true,
+                                position: positions[i],
+                                rotate: rotates[j],
+                                formatter: 'value: {c}',
+                                borderColor: '#0ff',
+                                borderWidth: 2
+                            },
+                            labelLayout: {
+                                hideOverlap: false
+                            },
+                            center: [
+                                100 / cols * (j + 0.5) + '%',
+                                100 / rows / 2 * (i + 0.5 + rot * 3) + '%'
+                            ],
+                            startAngle: rot ? 90 : 0,
+                            radius: [
+                                30,
+                                100 / rows / 2 * 0.6 + '%'
+                            ]
+                        });
+                        var rotText = j === 4 ? '30°' : rotates[j];
+                        title.push({
+                            text: 'startAngle: ' + (rot ? 0 : 90) + '\n' + positions[i] + ', rotate: ' + rotText,
+                            left: 100 / cols * (j + 0.5) + '%',
+                            top: 100 / rows / 2 * (i + 0.85 + rot * 3) + '%',
+                            textAlign: 'center'
+                        });
                     }
-
-                    chart.setOption({
-                        title: title,
-                        tooltip: {},
-                        series: series,
-                        backgroundColor: '#fff',
-                        animation: 0
-                    });
                 }
-                setPieChart();
+            }
+
+            chart.setOption({
+                title: title,
+                tooltip: {},
+                series: series,
+                backgroundColor: '#fff',
+                animation: 0
             });
-        </script>
-    </body>
+        }
+        setPieChart();
+    });
+</script>
+</body>
 </html>

From fa2d67a98fddd881d78d3d1dc6d564e24d28900d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=A5=E7=A7=8B=E5=8D=8A=E5=A4=8F?= <2646403766@qq.com>
Date: Tue, 14 Oct 2025 14:41:45 +0800
Subject: [PATCH 4/4] style(pie):fix unnecessary formatting in
 pie-label-rotate.html

---
 test/pie-label-rotate.html | 200 ++++++++++++++++++-------------------
 1 file changed, 100 insertions(+), 100 deletions(-)

diff --git a/test/pie-label-rotate.html b/test/pie-label-rotate.html
index dd039c3dc4..ef061473b5 100644
--- a/test/pie-label-rotate.html
+++ b/test/pie-label-rotate.html
@@ -19,112 +19,112 @@
 -->
 
 <html>
-<head>
-    <meta charset="utf-8">
-    <script src="lib/simpleRequire.js"></script>
-    <script src="lib/config.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
-<body>
-<style>
-    #main0 {
-        width: 100%;
-        height: 2000px;
-        margin: 20px 0;
-    }
-</style>
-<h3>Pie series label rotate</h3>
-<button onclick="run()">Run</button>
-<div id="main0"></div>
-<script>
-    var chart;
-    var series = [];
+    <head>
+        <meta charset="utf-8">
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            #main0 {
+                width: 100%;
+                height: 2000px;
+                margin: 20px 0;
+            }
+        </style>
+        <h3>Pie series label rotate</h3>
+        <button onclick="run()">Run</button>
+        <div id="main0"></div>
+        <script>
+            var chart;
+            var series = [];
 
-    function run() {
-        setInterval(function () {
-            for (var i = 0; i < series.length; ++i) {
-                for (var j = 0; j < series[i].data.length; ++j) {
-                    series[i].data[j] = Math.floor(Math.random() * 100) / 10;
-                }
-                series[i].startAngle = Math.random() * 360 - 180;
+            function run() {
+                setInterval(function () {
+                    for (var i = 0; i < series.length; ++i) {
+                        for (var j = 0; j < series[i].data.length; ++j) {
+                            series[i].data[j] = Math.floor(Math.random() * 100) / 10;
+                        }
+                        series[i].startAngle = Math.random() * 360 - 180;
+                    }
+                    chart.setOption({
+                        series: series
+                    });
+                }, 4000);
             }
-            chart.setOption({
-                series: series
-            });
-        }, 4000);
-    }
 
-    require(['echarts'], function (echarts) {
-        function setPieChart() {
-            var positions = [
-                'inner', 'center', 'outside'
-            ];
-            var rotates = [
-                undefined,
-                'radial',
-                'tangential',
-                'tangential-noflip',
-                30
-            ];
+            require(['echarts'], function (echarts) {
+                function setPieChart() {
+                    var positions = [
+                        'inner', 'center', 'outside'
+                    ];
+                    var rotates = [
+                        undefined,
+                        'radial',
+                        'tangential',
+                        'tangential-noflip',
+                        30
+                    ];
 
-            chart = echarts.init(document.getElementById('main0'));
-            var rows = positions.length;
-            var cols = rotates.length;
+                    chart = echarts.init(document.getElementById('main0'));
+                    var rows = positions.length;
+                    var cols = rotates.length;
 
-            var title = [];
-            for (var rot = 0; rot < 2; ++rot) {
-                for (var i = 0; i < rows; ++i) {
-                    for (var j = 0; j < cols; ++j) {
-                        series.push({
-                            type: 'pie',
-                            data: [
-                                2,
-                                1.2,
-                                2.4,
-                                3.6
-                            ],
-                            label: {
-                                show: true,
-                                position: positions[i],
-                                rotate: rotates[j],
-                                formatter: 'value: {c}',
-                                borderColor: '#0ff',
-                                borderWidth: 2
-                            },
-                            labelLayout: {
-                                hideOverlap: false
-                            },
-                            center: [
-                                100 / cols * (j + 0.5) + '%',
-                                100 / rows / 2 * (i + 0.5 + rot * 3) + '%'
-                            ],
-                            startAngle: rot ? 90 : 0,
-                            radius: [
-                                30,
-                                100 / rows / 2 * 0.6 + '%'
-                            ]
-                        });
-                        var rotText = j === 4 ? '30°' : rotates[j];
-                        title.push({
-                            text: 'startAngle: ' + (rot ? 0 : 90) + '\n' + positions[i] + ', rotate: ' + rotText,
-                            left: 100 / cols * (j + 0.5) + '%',
-                            top: 100 / rows / 2 * (i + 0.85 + rot * 3) + '%',
-                            textAlign: 'center'
-                        });
+                    var title = [];
+                    for (var rot = 0; rot < 2; ++rot) {
+                        for (var i = 0; i < rows; ++i) {
+                            for (var j = 0; j < cols; ++j) {
+                                series.push({
+                                    type: 'pie',
+                                    data: [
+                                        2,
+                                        1.2,
+                                        2.4,
+                                        3.6
+                                    ],
+                                    label: {
+                                        show: true,
+                                        position: positions[i],
+                                        rotate: rotates[j],
+                                        formatter: 'value: {c}',
+                                        borderColor: '#0ff',
+                                        borderWidth: 2
+                                    },
+                                    labelLayout: {
+                                        hideOverlap: false
+                                    },
+                                    center: [
+                                        100 / cols * (j + 0.5) + '%',
+                                        100 / rows / 2 * (i + 0.5 + rot * 3) + '%'
+                                    ],
+                                    startAngle: rot ? 90 : 0,
+                                    radius: [
+                                        30,
+                                        100 / rows / 2 * 0.6 + '%'
+                                    ]
+                                });
+                                var rotText = j === 4 ? '30°' : rotates[j];
+                                title.push({
+                                    text: 'startAngle: ' + (rot ? 0 : 90) + '\n' + positions[i] + ', rotate: ' + rotText,
+                                    left: 100 / cols * (j + 0.5) + '%',
+                                    top: 100 / rows / 2 * (i + 0.85 + rot * 3) + '%',
+                                    textAlign: 'center'
+                                });
+                            }
+                        }
                     }
-                }
-            }
 
-            chart.setOption({
-                title: title,
-                tooltip: {},
-                series: series,
-                backgroundColor: '#fff',
-                animation: 0
+                    chart.setOption({
+                        title: title,
+                        tooltip: {},
+                        series: series,
+                        backgroundColor: '#fff',
+                        animation: 0
+                    });
+                }
+                setPieChart();
             });
-        }
-        setPieChart();
-    });
-</script>
-</body>
+        </script>
+    </body>
 </html>