feat(pie): support align to edge and labelLine mode #11381

[Ovilia]

feat(pie): support align to edge and labelLine mode #11381

Problem and solution

In this PR, I proposed two new layouts for pie labels, aka aligning labels to 'lableLine' or 'edge'.

The default pie label layout may seem to be a little unorganized and not so beautiful, especially on devices with smaller resolutions.

Before:

After (two new layouts proposed):

API changes

The following are new options in this PR:

label: {
    alignTo: 'none', // 'none', 'labelLine', 'edge'. Works only when position is 'outer'. 'none' is for the previous design.

    // Closest distance between label and chart edge.
    // Works only position is 'outer' and alignTo is 'labelLine' or 'edge'.
    edgeMargin: 20,

    // Distance between text and labelLine. Previously, it's hard-coded as 3 in `labelLaout.js`.
    padding: 3
},
labelLine: {
    // Max length of length2 for 'labelLine' and 'edge' aligning.
    maxLength2: 200,

    // Min length of length2 for 'labelLine' and 'edge' aligning.
    minLength2: 20
}

The priority of edgeMargin is the highest. It is used to restrict text and label lines cannot go outside. maxLength2 and minLength2 are used to restrict the length of length2 so that it looks well on devices with both small and large resolutions.

Result and test

test/pie-alignTo.html provides test cases with different minLength2 and maxLength2.

Limitations and todo

• textAlign is calculated from whether it's on the left or right side and cannot be changed by the user. We probably should provide the option to make the text align to the outer sides or the inner sides.
• We should consider more options for the label design like Label enhancement on pie. #11381.

[pissang]

The demo works great, good job! Will review the code closely later.

About the configuration design, padding has already been used as a common property of label. https://www.echartsjs.com/zh/option.html#series-pie.label.padding I suggested use distance, or a more specific distanceToLabelLine.

[Ovilia]

The demo works great, good job! Will review the code closely later.

About the configuration design, padding has already been used as a common property of label. https://www.echartsjs.com/zh/option.html#series-pie.label.padding I suggested use distance, or a more specific distanceToLabelLine.

Sure. I will update the name after your review.

[pissang]

edgeMargin in the outer scope is not used.

[pissang]

Extra comma here

[pissang]

Can you add another parameter to test edgeMargin? Also it will be great to record an interaction for testing.

[100pah]

(1)

In the pie-alignTo.html, slide the 'minLength2' in the "contoller panel" util all of the labels disappear in the first pie, and slide back. the labels will not be displayed any more.
I don't know whether it is a problem.

(2)

I have test this case: more than one pie charts in one echarts instance.

            function makeData() {
                var count = 10;
                var data = [];
                var text = '';
                for (var i = 0; i < count; i++) {
                    text += 'X';
                    data.push({
                        name: text + i,
                        value: Math.random()
                    });
                }
                return data;
            }

            var option0 = {
                series: [{
                    type: 'pie',
                    radius: '25%',
                    center: ['25%', '50%'],
                    data: makeData(),
                    // animation: false,
                    labelLine: {
                        minLength2: 50,
                        maxLength2: 10
                    },
                    label: {
                        // edgeMargin: 20,
                        position: 'outer',
                        alignTo: 'edge',
                        padding: 5
                    }
                }, {
                    type: 'pie',
                    radius: '25%',
                    center: ['75%', '50%'],
                    data: makeData(),
                    // animation: false,
                    labelLine: {
                        minLength2: 50,
                        maxLength2: 10
                    },
                    label: {
                        // edgeMargin: 20,
                        position: 'outer',
                        alignTo: 'labelLine',
                        padding: 5
                    }
                }]
            };

The result seams buggy.

(3)

I am not sure about the config edgeMargin. It seams define the gap between "a pie chart" and the dom container. But if consider there are more than one pie charts in one dom container, do we also need to consider the gap between different pie charts?
That is, do we need to define a rect area with left/right/top/bottom/width/height but not a edgeMargin? I am not sure. @Ovilia @pissang

[Ovilia]

@100pah (1) is not bug. It's because maxLength2 is set to be minLength2 when minLength2 is bigger than maxLength2. If you set maxLength2 to be a smaller number, the previous state will come back.

[Ovilia]

This PR is abandoned. New PR is #11715.