[PR] add labelSide to formatter params [echarts]

[via GitHub]

MC-YCY opened a new pull request, #21458:
URL: https://github.com/apache/echarts/pull/21458

   <!-- Please fill in the following information to help us review your PR more 
efficiently. -->
   
   ## Brief Information
   
   This pull request is in the type of:
   
   - [ ] bug fixing
   - [x] 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?
   <img width="978" height="790" alt="image" 
src="https://github.com/user-attachments/assets/2baae755-26bc-42cb-8b31-2adc80b60d81";
 />
   
   ```js
   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.
   <!-- DESCRIBE THE BUG OR REQUIREMENT HERE. -->
   
   <!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
   To address this, a labelSide property is added to determine the horizontal 
orientation of labels.
   
   
   ### After: How does it behave after the fixing?
   
   ```js
   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' }
           ]
       }]
   };
   ```
   
   <!-- THE RESULT AFTER FIXING AND A SIMPLE EXPLANATION ABOUT HOW IT IS FIXED. 
-->
   
   <!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
   
   
   
   ## 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.
   
   <!-- PLEASE CHECK IT AGAINST: 
<https://github.com/apache/echarts/wiki/Security-Checklist-for-Code-Contributors>
 -->
   
   ### 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
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org