2021-09-24

1 使用详解

（1）series.labelLine.length

说明：视觉引导线第一段的长度。

（2）series.labelLine.length2

说明：视觉引导线第二段的长度。

（3）series.label.formatter

说明：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

（4）series.label.padding

说明：文字块的内边距。

2 原始效果图

3 实现代码

   
   

     
     

      
      

     
     
     
     

      
      

       
                       formatter: 
       
       '{a} <br/>{b} : {c} ({d}%)'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       legend: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                
       
       orient: 
       
       'vertical',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                
       
       left: 
       
       'left',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                
       
       data: [
       
       '直接访问', 
       
       '邮件营销', 
       
       '联盟广告', 
       
       '视频广告', 
       
       '搜索引擎']
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       series: [
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                       {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       name: 
       
       '访问来源',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       type: 
       
       'pie',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       radius: 
       
       '55%',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       labelLine:{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                        
       
       length:
       
       20,
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                        
       
       length2:
       
       50
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       label:{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                        
       
       formatter:
       
       "{b}\n\n",
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                        
       
       padding:[
       
       0,
       
       -55]
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       center: [
       
       '50%', 
       
       '60%'],
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       data: [
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                               {
       
       value: 
       
       335, 
       
       name: 
       
       '直接访问'},
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                               {
       
       value: 
       
       310, 
       
       name: 
       
       '邮件营销'},
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                               {
       
       value: 
       
       234, 
       
       name: 
       
       '联盟广告'},
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                               {
       
       value: 
       
       135, 
       
       name: 
       
       '视频广告'},
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                               {
       
       value: 
       
       1548, 
       
       name: 
       
       '搜索引擎'}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                           ],
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                    
       
       emphasis: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                        
       
       itemStyle: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                            
       
       shadowBlur: 
       
       10,
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                            
       
       shadowOffsetX: 
       
       0,
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                            
       
       shadowColor: 
       
       'rgba(0, 0, 0, 0.5)'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                               }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                   ]
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               };
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       ​
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       // 使用刚指定的配置项和数据显示图表。
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               myChart.setOption(option);
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           </script>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </body>
      
      
     
     
   
   

4 最终效果图

ps :

————————————————
版权声明：本文为CSDN博主「旭东怪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38974638/article/details/108984246