fix(labelLine): fix error when labelLine don't have points

src/label/labelGuideHelper.ts

@@ -485,8 +485,11 @@ function setLabelLineState(
 function buildLabelLinePath(path: CanvasRenderingContext2D, shape: Polyline['shape']) {
     const smooth = shape.smooth as number;
     const points = shape.points;
+    if (!points) {
+        return;
+    }
     path.moveTo(points[0][0], points[0][1]);
-    if (smooth > 0) {
+    if (smooth > 0 && points.length >= 3) {
         const len1 = vector.dist(points[0], points[1]);
         const len2 = vector.dist(points[1], points[2]);
         if (!len1 || !len2) {
@@ -505,8 +508,9 @@ function buildLabelLinePath(path: CanvasRenderingContext2D, shape: Polyline['sha
         path.bezierCurveTo(midPoint2[0], midPoint2[1], midPoint2[0], midPoint2[1], points[2][0], points[2][1]);
     }
     else {
-        path.lineTo(points[1][0], points[1][1]);
-        path.lineTo(points[2][0], points[2][1]);
+        for (let i = 1; i < points.length; i++) {
+            path.lineTo(points[i][0], points[i][1]);
+        }
     }
 }
 

test/pie-alignTo.html

@@ -211,45 +211,45 @@ under the License.
             });
             var config = {
                 length2: 15,
-                margin: 20
+                margin: 20,
+                overflow: 'truncate'
             };
 
-            gui
-                .add(config, 'length2', 0, 300)
-                .onChange(function (value) {
-                    if (chart0) {
-                        option0.series[0].labelLine.length2 = value;
-                        option1.series[0].labelLine.length2 = value;
-                        optionNone.series[0].labelLine.length2 = value;
-                        chart0.setOption(option0);
-                        chart1.setOption(option1);
-                        chartNone.setOption(optionNone);
-
-                        for (var i = 0; i < 4; ++i) {
-                            option2.series[i].labelLine.length2 = value;
+            function update() {
+                const newOpt = {
+                    series: [{
+                        labelLine: {
+                            length2: config.length2
+                        },
+                        label: {
+                            margin: config.margin,
+                            overflow: config.overflow
                         }
-                        chart2.setOption(option2);
-                    }
-                });
-
-            gui
-                .add(config, 'margin', 0, 300)
-                .onChange(function (value) {
-                    if (chart0) {
-                        option0.series[0].label.margin = value;
-                        option1.series[0].label.margin = value;
-                        optionNone.series[0].label.margin = value;
-                        chart0.setOption(option0);
-                        chart1.setOption(option1);
-                        chartNone.setOption(optionNone);
-
-                        for (var i = 0; i < 4; ++i) {
-                            option2.series[i].label.margin = value;
+                    }]
+                }
+                chart0.setOption(newOpt);
+                chart1.setOption(newOpt);
+                chartNone.setOption(newOpt);
+
+                const newOpt2 = { series: [] };
+                for (var i = 0; i < 4; ++i) {
+                    newOpt2.series.push({
+                        labelLine: {
+                            length2: config.length2,
+                        },
+                        label: {
+                            margin: config.margin,
+                            overflow: config.overflow
                         }
-                        chart2.setOption(option2);
-                    }
-                });
-            });
+                    })
+                }
+                chart2.setOption(newOpt2);
+            }
+
+            gui.add(config, 'length2', 0, 300).onChange(update);
+            gui.add(config, 'margin', 0, 300).onChange(update);
+            gui.add(config, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
+        });
         </script>
     </body>
 </html>

test/pie-label-extreme.html

@@ -74,6 +74,9 @@ under the License.
                         "fontSize": 10
                     },
                     "labelLine": {
+                        "lineStyle": {
+                            "color": '#ccc'
+                        },
                         "smooth": true
                     },
                     "data": [{
@@ -708,7 +711,7 @@ under the License.
             labelFolder.open();
             labelLineFolder.open();
             labelFolder.add(config.label, 'alignTo', ['none', 'edge', 'labelLine']).onChange(update);
-            labelFolder.add(config.label, 'overflow', ['truncate', 'wrap']).onChange(update);
+            labelFolder.add(config.label, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
             labelFolder.add(config.label, 'margin', 0, 50).onChange(update);
             labelFolder.add(config.label, 'bleedMargin', 0, 500).onChange(update);
             labelLineFolder.add(config.labelLine, 'length', 0, 500).onChange(update);