feature(pie): add labelSide to formatter params

[MC-YCY]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Add labelSide parameter to pie label formatter to enhance customization of label styles.

Fixed issues

Details

Before: What was the problem?

const data = [
   { value: 1048, name: 'Search Engine' },
   { value: 735, name: 'Direct' },
   { value: 580, name: 'Email' },
   { value: 484, name: 'Union Ads' },
   { value: 300, name: 'Video Ads' }
];

// 起始角度（ECharts 默认是 -90°）
const startAngle = -Math.PI / 2;

// 总值
const total = data.reduce((sum, d) => sum + d.value, 0);

let acc = 0;

data.forEach(item => {
   const midAngle =
      startAngle +
      (acc + item.value / 2) / total * Math.PI * 2;

   const nx = Math.cos(midAngle);

   item.labelSide = nx > 0 ? 'right' : 'left';

   acc += item.value;
});


option = {
   title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
   },
   tooltip: {
      trigger: 'item'
   },
   legend: {
      orient: 'vertical',
      left: 'left'
   },
   series: [
      {
         name: 'Access From',
         type: 'pie',
         radius: '50%',
         label: {
            show: true,
            position: 'outside',
            formatter: (v) => {
               if (v.data.labelSide === 'right') {
                  return `{light|}{name|${v.data.name}}`;
               } else if (v.data.labelSide === 'left') {
                  return `{name|${v.data.name}}{light|}`;
               }
               return `{name|${v.data.name}}`;
            },
            rich: {
               name: {
                  color: '#333',
                  fontSize: 14
               },
               light: {
                  width: 10,
                  height: 10,
                  borderRadius: 5,
                  backgroundColor: 'gold'
               }
            }
         },
         data: data,
      }
   ]
};

In some visual designs, elements such as light effects and icon graphics need to be fixed on one side of the pie sector.

Previously, formatter parameters could not access angle or layout information, making it impossible to determine the label position without performing cumbersome calculations based on data values and angles.

To address this, a labelSide property is added to determine the horizontal orientation of labels.

After: How does it behave after the fixing?

var option = {
    series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        label: {
            show: true,
            position: 'outside',
            formatter:(v)=>{
                if(v.labelSide === 'right'){
                    return `{light|}{name|${v.data.name}}`
                }else if(v.labelSide === 'left'){
                    return `{name|${v.data.name}}{light|}`
                }
                return `{name|${v.data.name}}`
            },
            rich:{
                name:{
                    color:"#333",
                    fontSize:14
                },
                light:{
                    width:10,
                    height:10,
                    borderRadius:5,
                    backgroundColor:'gold'
                }
            }
        },
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
    }]
};

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

Security Checking

• This PR uses security-sensitive Web APIs.

ZRender Changes

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

Related test cases or examples to use the new APIs

N.A.

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.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.

⚠️ MISSING DOCUMENT INFO: Please make sure one of the document options are checked in this PR's description. Search "Document Info" in the description of this PR. This should be done either by the author or the reviewers of the PR.