Echarts定制（2)-间断圆环

Echarts定制- 间断圆环

一、基础学习

B站有超详细的基础教学视频，这里我推荐

黑马程序员pink老师https://www.bilibili.com/video/BV1v7411R7mp
非常的详细，风格幽默

charts社区:
https://www.makeapie.com/explore.html
这里有超多的炫酷效果

二、间断圆环

//圆环的间断效果就是通过每个数据中间插一个值比较小的数据，
//并且将这个数据的样式改为背景色，这样就实现了间断的效果
var data=[
                 {value: 178,
                 name: '1-20岁',
                 itemStyle:{
                     normal: {
                     borderWidth: 5,
                     shadowBlur: 20,
                     borderColor:'#00ffff',
                     shadowColor: '#00ffff'
                    }
                   }
                 },
                 //实现间断的数据
                 {value: 50,//值根据自己需要的效果调大小
                 name: '',
                 itemStyle: {
                     normal: {
                     label: {
                         show: false
                     },
                     labelLine: {
                         show: false
                     },
                     //设置间断的颜色样式
                     color: 'rgba(0, 0, 0, 0)',
                     borderColor: 'rgba(0, 0, 0, 0)',
                     borderWidth: 0
                     }
                 }
                 },
                  {value: 1335,
                 name: '20-30岁',
                 itemStyle:{
                     normal: {
                     borderWidth: 5,
                     shadowBlur: 20,
                     borderColor:'#006ced',
                     shadowColor: '#006ced'
                    }
                   }
                 },
                 {value: 50,
                 name: '',
                 itemStyle: {
                     normal: {
                     label: {
                         show: false
                     },
                     labelLine: {
                         show: false
                     },
                     color: 'rgba(0, 0, 0, 0)',
                     borderColor: 'rgba(0, 0, 0, 0)',
                     borderWidth: 0
                     }
                 }
                 },
                  {value: 457,
                 name: '30-40岁',
                 itemStyle:{
                     normal: {
                     borderWidth: 5,
                     shadowBlur: 20,
                     borderColor:'#ffa800',
                     shadowColor: '#ffa800'
                    }
                   }
                 },
                 {value: 50,
                 name: '',
                 itemStyle: {
                     normal: {
                     label: {
                         show: false
                     },
                     labelLine: {
                         show: false
                     },
                     color: 'rgba(0, 0, 0, 0)',
                     borderColor: 'rgba(0, 0, 0, 0)',
                     borderWidth: 0
                     }
                 }
                 },
                  {value: 567,
                 name: '40岁以上',
                 itemStyle:{
                     normal: {
                     borderWidth: 5,
                     shadowBlur: 20,
                     borderColor:'#ff5b00',
                     shadowColor: '#ff5b00'
                    }
                   }
                 },
                 {value: 50,
                 name: '',
                 itemStyle: {
                     normal: {
                     label: {
                         show: false
                     },
                     labelLine: {
                         show: false
                     },
                     color: 'rgba(0, 0, 0, 0)',
                     borderColor: 'rgba(0, 0, 0, 0)',
                     borderWidth: 0
                     }
                 }
                 },

             ];

 option = {
     backgroundColor: '#0A2E5D',
     series: [
         {
     name: '',
     type: 'pie',
     clockWise: false,
     radius: [55, 59],//设置圆环的内外半径
     hoverAnimation: true,
     itemStyle: {
         normal: {
             label: {
                 show: true,
                 position: 'outside',
                 color: '#ffffff',
                 fontSize :8,
                 //设置提示信息
                 formatter: function(params) {
                                     var percent = 0;
                                     var total = 0;
                                     for (var i = 0; i < 8; i=i+2) {
                                         total += data[i].value;
                                     }
                                     percent = ((params.value / total) * 100).toFixed(0);
                                     if(params.name !== '') {
                                         return '年龄段：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                                     }else {
                                         return '';
                                     }
                                 },
             },
             labelLine: {
                 length:10,
                 length2:20,
                 show: true,
                 color:'#00ffff'
             }
         }
     },
             data:data
         }
     ]
 };