Echart环形图

var colorList = ["#034079", "#49DFF0", "#DFB141", "#00FEB5", "#7081DB", "#FDFEFF", "#2385E0"];
option = {
    title: {
        text: '学生各学年消费细则分析',
        textStyle: {
            color: '#fff',
        },
    },
    backgroundColor: '#ccc', //背景颜色
     tooltip: {  //放鼠标到圆环上会显示的提示文字
       trigger: 'item',
       formatter: "{b}: {c} ({d}%)"
    },
    // grid: {
    //     top: '1%',
    //     containLabel: true
    // },
    series: [{
    	// center:[200,100], //饼图的位移
        type: 'pie',
        radius: ['27%', '53%'],
        // roseType: 'radius',
        clockwise: false, // 是否顺时针
        z: 5,
        itemStyle: { // 每块数据的颜色
            normal: {
             	borderColor: '#04192b', // 每块数据 边框的颜色
                borderWidth: 1  // 边框粗细
                color: function(params) {
                    // build a color map as your need.
                    return colorList[params.dataIndex]
                },
                // shadowBlur: 20,  //阴影
                // shadowColor: 'rgba(0, 0, 0, 0.3)' // 透明度
            }
        },
        // 如图:学费 文字
        label: {
            normal: {
                show: false,
                color:'#000',
                fontSize:15,
                formatter: (params，ticket,callback)=>{
                    return params.name+'\n'+params.percent+'%'
                },
                // rich: {
                //     b: {
                //         fontSize: 12,
                //         color: '#fff',
                //         align: 'left',
                //         padding: 4
                //     },
                //     hr: {
                //         //		                            			borderColor: '#12EABE',
                //         width: '100%',
                //         borderWidth: 1,
                //         height: 0
                //     },
                //     d: {
                //         fontSize: 12,
                //         color: '#fff',
                //         align: 'left',
                //         padding: 1
                //     },
                //     c: {
                //         fontSize: 12,
                //         color: '#fff',
                //         align: 'center',
                //         //		                            padding: 4
                //     }
                // }
            }
        },
		// 文字连接 圆环的线
        labelLine: {
            normal: {
                length: 20, //第一节线的长度
                length2: 30, //第二节线的长度
                lineStyle: { 
                    width: 1, // 线的粗细
                     color:'#000'
                },
               
            }
        },
        // 鼠标放到圆环的时候才会显示 学费 和 连接圆环的线
        emphasis: {
                label: {
                    show: true
                }    
            },
        data: [{
                value: 50,
                name: '吃饭'
            },
            {
                value: 50,
                name: '学费'
            },
            {
                value: 50,
                name: '买护理品'
            },
            {
                value: 40,
                name: '买衣服'
            },
            {
                value: 30,
                name: '买文具'
            },
            {
                value: 10,
                name: '其他'
            },
            {
                value: 20,
                name: '买零食'
            },
        ]
    }]
};

// data 无数据的时候展示的---暂无数据
 title: {

   show: Object.keys(data).length === 0,

   extStyle: {

     color: "grey",

     fontSize: 20

 },

  text: "暂无数据",

  left: "center",

  top: "center"

   },

// 另一种数据模式
data:[
      		  {
                    value:100, name:'其它',
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 550,
                            y: 440,
                            r: 120,
                            colorStops: [{
                                offset: 0, color: 'rgba(235,232,6, 0.2)' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#EBE806' // 100% 处的颜色
                            }],
                            // global: true // 缺省为 false
                        }
                    },
                    labelLine: {
                        lineStyle: {
                            color: '#EBE806'
                        }
                    }
                },
                {
                    value:30, name:'平安保险',
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 550,
                            y: 440,
                            r: 120,
                            colorStops: [{
                                offset: 0, color: 'rgba(255,86,36, 0.2)' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#FF5624' // 100% 处的颜色
                            }],
                            global: true // 缺省为 false
                        }
                    },
                    labelLine: {
                        lineStyle: {
                            color: '#FF5624'
                        }
                    }
                },
                {
                    value:30, name:'太平洋保险',
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 550,
                            y: 440,
                            r: 120,
                            colorStops: [{
                                offset: 0, color: 'rgba(94,166,254, 0.2)' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#5EA6FE' // 100% 处的颜色
                            }],
                            global: true // 缺省为 false
                        }
                    },
                    labelLine: {
                        lineStyle: {
                            color: '#5EA6FE'
                        }
                    }
                },
                {
                    value:30, name:'中国人保',
                    itemStyle: {
                        color: {
                            type: 'radial',
                            x: 550,
                            y: 440,
                            r: 120,
                            colorStops: [{
                                offset: 0, color: 'rgba(0,222,215, 0.2)' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#37FFF9' // 100% 处的颜色
                            }],
                            global: true // 缺省为 false
                        }
                    },
                    labelLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                
            ]