需求

项目开发中 
    
    
    
    
，产品经理绘制的原型图中
     


     


     


     


     ，需要前端实现一个饼状图 




 




 




 




 



，且既在饼图内部中 显示 百分比 

   

   

   

   

，又显示 外部指示线及数值
     

     

     

     

    ，效果如下图所示：

查了下 Echarts 官网文档  




  




  




  




  


，需要配置 series 下的 label 配置项 


  


  


  


  


，如下所示：

series: [ label: { normal: { position: inside // 在内部显示
     
     
     
     
   ，outseide 是在外部显示 show: true, formatter: {c} // formatter 是标签内容的格式器   




   




   




   




   

，用于转换格式 
    
    
    
    
。支持 字符串和回调函数两种形式
     


     


     


     


     。 } } ]

其中 



 



 



 



 



，formatter 是标签内容的格式器                      ，用于转换格式 




 




 




 




 



。支持 字符串和回调函数两种形式 

   

   

   

   

。

{c} 代办字符串模板变量
    




    




    




    




    
，表示数据值
























，常用的模板变量有：

{ a }：系列名 { b }：数据名 { c }：数据值 { d }：百分比

不过问题来了                      ，echarts 好像没法直接配置成 内部+外部 同时展示的情况
     

     

     

     

    。
     



     



     



     



     ，因为在单个的 series 中（即其中的一个对象中）
























，只能设置一个label  




  




  




  




  


。

不过也好解决 
    
    
    
    
，通过查看 echarts 官网 series 配置项
     


     


     


     


     ，可以看出 




 




 




 




 



，series 是一个数组（如上图所示） 

   

   

   

   

，既然单个中只能出现一个
     

     

     

     

    ，那么我配置成 2个（多个）相同的对象  




  




  




  




  


，让他们重合 


  


  


  


  


，就会出现两个 label 标签
     
     
     
     
   ，一个在内部展示   




   




   




   




   

，一个在外部展示 



 



 



 



 



，就可以完美解决这种情况 


  


  


  


  


。

代码实例如下所示：

series: [ { type: pie, radius: 90%, data: [ { value: data?.winBidNumber || 0, name: 中标数量 }, { value: data?.loseBidNumber || 0, name: 未中标数量 }, { value: data?.abandonBidNumber || 0, name: 弃标数量 } ], labelLine: { show: true, position: outside, length: 10, length2: 50 }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } }, label: { normal: { position: outside, show: true, formatter: (d: any) => { console.log(222, d); return d.name + （ + d.value + 次 +） } } } }, { type: pie, radius: 90%, data: [ { value: data?.winBidNumber || 0, name: 中标数量 }, { value: data?.loseBidNumber || 0, name: 未中标数量 }, { value: data?.abandonBidNumber || 0, name: 弃标数量 } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } }, label: { normal: { position: inside, show: true, formatter: (d: any) => { return d.percent + % } } } } ]

其中                      ， labelLine 属性 是 用来配置 外部指示线（第一段 
    
    
    
    
、第二段）的长度及样式的
     
     
     
     
   。

formatter 为 回调函数的写法如上面的代码实例
    




    




    




    




    
，该回调函数接收一个参数
























，该参数的值包含了 模板字符串变量所拥有的值                      ，如下图打印的所示：