echarts环形图，自定义说明文字

一、代码

  1 app.title = '已安装通讯盒电站统计';
  2 
  3 option = {
  4      backgroundColor: '#0f0f31',//#0f0f31
  5     title: {
  6         show:true,
  7         x:"left",
  8         text: '已安装通讯盒电站统计',
  9         textStyle:{
 10             fontSize:16
 11             ,fontWeight:'normal'
 12             ,color:'#72a1d2'
 13         },
 14         left:20,
 15         top:10,
 16         borderColor :'#10395c',
 17         borderWidth :2,
 18     },
 19     tooltip: {
 20         trigger: 'item',
 21         formatter: "{a} <br/>{b}: {c} ({d}%)"
 22     },
 23 
 24     graphic: [ {
 25         type: 'group',
 26         id: 'textGroup2',
 27         left: 370,
 28         top: 400,
 29         position :[10, 0],
 30         children: [
 31            
 32             {
 33                 type: 'text',
 34                 z: 100,
 35                 top: 'middle',
 36                 left: 100,
 37                 style: {
 38                     formatter: "{a} <br/>{b}: {c} ({d}%)",
 39                     text: [
 40                         '已安装1280个',
 41                         '未安装320个',
 42                     ].join('\n'),
 43                     font: '16px cursive',
 44                     textVerticalAlign :'middle',
 45                     fill:'#13a7d1',
 46                     
 47                     
 48                 }
 49             }
 50         ]
 51     }],
 52     series: [
 53         {
 54             name:'已安装通讯盒电站统计',
 55             type:'pie',
 56             radius:['10%','18%'],
 57             avoidLabelOverlap:false,
 58             color:['#32A8FF',' #02C800','#9f47fd'],
 59             formatter: '{b}: {d}',
 60             slient:true,
 61             markLine :{
 62                 label  :{
 63                     show:true,
 64                     position :'outside'  
 65                 },  
 66             },
 67             labelLine:{
 68                 normal:{  
 69                     show:true,
 70                     length:14  ,
 71                     length2 :56,
 72                 }  
 73             },
 74             label:{
 75               normal:{
 76                   show:true,
 77                   position:'center',
 78                   formatter:function(){
 79                       return '80%'
 80                   },
 81                   textStyle:{
 82                       fontSize:20,
 83                       color:'rgba(20, 180, 213, 0.9)',
 84                   }
 85               }  
 86             },
 87             emphasis:{
 88               show:true,
 89               textStyle:{
 90                   fontSize:30,
 91                   //fontWeight:'bold'
 92               }
 93             },
 94             
 95             data:[{value:1280,name:'已安装',itemStyle:{
 96                 normal:{
 97                     color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{ 
 98                         //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
 99 
100                         offset: 0,
101                         color: '#2a8af6'
102                     }, {
103                         offset: 1,
104                         color: '#393eda'
105                     }])
106                 },emphasis : {
107                     label : {
108                         show : true,
109                         formatter : "{b}\n{d}%",
110                         color:'white',
111                     }
112                 }
113             }},{value:320,name:'未安装',itemStyle:{
114                 normal:{
115                     color:'transparent',
116                 }
117             }}]
118         },{
119             name:'',
120             type:'pie',
121             radius:['8%','10%'],
122             avoidLabelOverlap:false,
123             legendHoverLink :false,
124             label:{
125               show:false,  
126             },
127             tooltip:{//禁止鼠标悬停显示提示框
128                 show:false,
129             },
130             hoverAnimation:false ,//禁止鼠标悬停放大区域
131             color:['#bcdbfa'],
132              
133             data:[{value:100}]
134         }
135     ]
136 };

二、效果图

 

转载于:https://www.cnblogs.com/mycnblogs-guoguo/p/10101970.html