利用echarts自定义环形图

一、代码

 app.title = '通讯盒各版本用户占比';

 option = {
      backgroundColor: '#0f0f31',
     title: {
         show:true,
         x:"left",
         text: '通讯盒各版本用户占比',
         textStyle:{
             fontSize:16
             ,fontWeight:'normal'
             ,color:'#72a1d2'
         },
         left:20,
         top:10,
         borderColor :'#10395c',
         borderWidth :2,
     },
     tooltip: {
         trigger: 'item',
         formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     series: [
         {
             name:'通讯盒各版本用户占比',
             type:'pie',
             radius:['10%','18%'],
             avoidLabelOverlap:false,
             color:['#32A8FF',' #02C800','#9f47fd'],
             formatter: '{b}: {d}',
             markLine :{
                 label  :{
                     show:true,
                     position :'outside'
                 },
             },
             labelLine:{
                 normal:{
                     length:14  ,
                     length2 :56,
                 }
             },
             label :{
                  formatter: [
                     '{d}%',
                     '{b}'
                 ].join('\n'),
                 verticalAlign :'bottom',
                 position:'outside',
                 //textShadowOffsetY :10,
                 align :'right',
                 color:'white',
                 height :36,
                  rich: {
                     a: {
                         verticalAlign:'bottom',
                         // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
                     }
                 }
             },

             data:[{value:68,name:'YBT1',label: {
                 normal: {
                    textStyle: {
                         color: '#508DFF'  // 改变标示文字的颜色
                    }
                 }
             },itemStyle:{
                 normal:{
                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                         //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                         offset: 0,
                         color: '#508DFF'
                     }, {
                         offset: 1,
                         color: '#26C5FE'
                     }])
                 }
             }},{value:18,name:'YBT2',label: {
                 normal: {
                    textStyle: {
                         color: '#63E587'  // 改变标示文字的颜色
                    }
                 }
             },itemStyle:{
                 normal:{
                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                         //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                         offset: 0,
                         color: '#63E587'
                     }, {
                         offset: 1,
                         color: '#5FE2E4'
                     }])
                 }
             }},{value:14,name:'YBT3',label: {
                 normal: {
                    textStyle: {
                         color: '#9f47fd'  // 改变标示文字的颜色
                    }
                 }
             },itemStyle:{
                 normal:{
                     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                         //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                         offset: 0,
                         color: '#9f47fd'
                     }, {
                         offset: 1,
                         color: '#9f47fd'
                     }])
                 }
             }}]
         },{
             name:'',
             type:'pie',
             radius:['8%','10%'],
             avoidLabelOverlap:false,
             legendHoverLink :false,
             label:{
               show:false,
             },
             tooltip:{//禁止鼠标悬停显示提示框
                 show:false,
             },
             hoverAnimation:false ,//禁止鼠标悬停放大区域
             color:['#bcdbfa'],
             data:[{value:'100'}]
         }
     ]
 };

二、效果图