feat: Introducing "mixed" valued Pie Chart

[kirgrim]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Adding "mixed" type of the pie chart that will allow generate roses of variable radius + variable arc lengths

Fixed issues

N/A

Details

Before: What was the problem?

Previously you could either specify "area" or "radius" for the roseType which reduced the number of possible dimensions of quantitative data to apply

After: How does it behave after the fixing?

Now you could specify "mixed" roseType for the pie chart and supply two elements to the array of values:

• first element is responsible for the radius
• second element is responsible for the arc length

Example of the newly supported roseType:

        const option = {
            title: {
                text: 'Rose Type Test',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    if (Array.isArray(params.value) && params.value.length >= 2) {
                        return params.seriesName + '<br/>' +
                               params.name + ': Radius=' + params.value[0] + ', Angle=' + params.value[1] + ' (' + params.percent + '%)';
                    } else {
                        return params.seriesName + '<br/>' +
                               params.name + ': ' + params.value + ' (' + params.percent + '%)';
                    }
                }
            },
            series: [
                {
                    name: 'Rose Type',
                    type: 'pie',
                    radius: ['30%', '70%'],
                    center: ['50%', '50%'],
                    roseType: 'mixed',
                    data: [
                        { value: [10, 15], name: 'A' },
                        { value: [20, 25], name: 'B' },
                        { value: [30, 35], name: 'C' },
                        { value: [40, 45], name: 'D' },
                        { value: [50, 55], name: 'E' }
                    ],
                    label: {
                        show: true,
                        formatter: function(params) {
                            if (Array.isArray(params.value) && params.value.length >= 2) {
                                return params.name + ': R=' + params.value[0] + ', A=' + params.value[1];
                            } else {
                                return params.name + ': ' + params.value;
                            }
                        }
                    }
                }
            ]
        };

the full interactive example is added to:

test/pie-mixed-rose-type.html

Document Info

One of the following should be checked.

• [] This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

[Ovilia]

Thanks for your contribution! Do we have any theoretical basis for this new design? Because multi-dimension mapping can sometimes be confusing so we need to make sure viewers don't get confused by this design.

[ChristopheDeLoor]

Thanks for your contribution! Do we have any theoretical basis for this new design? Because multi-dimension mapping can sometimes be confusing so we need to make sure viewers don't get confused by this design.

Hi Olivia! @kirgrim opened this PR on the request of the company I represent. The multi-dimensional pie chart is a chart that has been requested by multiple of our customers.

While it's true that multi-variable mappings can introduce cognitive load, this approach is already in use in several professional visualization tools. For example, AG Charts includes a similar concept called "Variable Sector Radius".

To minimize potential confusion, this functionality is opt-in, meaning developers can use it when it aligns with their data storytelling goals. Additionally, clear labeling, legends, or tooltips can help make the meaning of both dimensions explicit to viewers.

In terms of value to end users, visualizing both dimensions and radiuses in a pie chart transforms it from a simple categorical breakdown into a powerful multi-dimensional insight chart. By allowing users to see an additional variable in the slice radius (e.g., total study count, market size, or population), they can instantly perceive not just proportions but also magnitude and scale across categories, something standard pie charts can't convey. This added depth supports users to spot outliers or underrepresented segments at a glance.