今年业绩完成情况表(万元)echarts 饼配置项内容和展示

      option = null;
app.title = '环形图';
option = {
    backgroundColor:'#333',
        grid: {
            y:'30',
            x:'10',
            x2: '10',
            y2: '0',
            containLabel: true
        },
        title: {
        text: '今年业绩完成情况表(万元)',
        x: 'center',
        y: 'top',
        itemGap: 20,
        textStyle : {
            color : '#d9efff',
            fontFamily : '微软雅黑',
            fontSize : 18,
            fontWeight : 'bolder'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{b}: ({d}%)<br/> {c}万元"
    },
    series: [
        //认购完成01
        {
            name:'认购完成率',
            center: ['30%', 'center'],
            type:'pie',
            radius: ['40%', '60%'],    
            hoverAnimation: false,         
            itemStyle:{
               normal:{
                   label:{
                       show:true,
                       distance:0.7,
                            textStyle:{color:'#d9efff',fontSize:"10"},
                            formatter:'{b}:({d}%)\n {a|{c}万元}',
                            rich: {
                                a: {
                                    color: "#fed900",
                                },
                            }
                   },
               },
            },

            data:[
                {value:6000, name:'已完成',itemStyle:{
                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#fff600" // 0% 处的颜色
                    }, 
                     {
                        offset: 1,
                        color: "#fed000" // 100% 处的颜色
                    }], false),
                },},
                {value:2000, name:'未完成',itemStyle:{
                    color:'#888f9b',
                }},
            ]
        },
        //认购完成02
        {
            name:'认购完成率',
            center: ['30%', 'center'],
            type:'pie',
            radius: ['60%', '40%'], 
            hoverAnimation: false,
            label: {
                    normal: {
                        show: true,
                        position: 'center',
                        formatter:function (argument) {
                            var html;
                            html='认购\r\n\r\n'+'完成率';
                            return html;
                        },
                        textStyle:{
                          fontSize: 14,
                            color:'#e8ecf0'
                        },

                    }
                },
            data:[
                {value:6000, name:'已完成',itemStyle:{
                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#fff600" // 0% 处的颜色
                    }, 
                     {
                        offset: 1,
                        color: "#fed000" // 100% 处的颜色
                    }], false),
                },},
                                {value:2000, name:'未完成',itemStyle:{
                    color:'#888f9b',
                }},
            ]
        },
        //签约完成01
         {
            name:'签约完成率',
            center: ['70%', 'center'],
            type:'pie',
            radius: ['40%', '60%'],   
            hoverAnimation: false,          
            itemStyle:{
               normal:{
                   label:{
                       show:true,
                       distance:0.7,
                            textStyle:{color:'#d9efff',fontSize:"10"},
                            formatter:'{b}:({d}%)\n {a|{c}万元}',
                            rich: {
                                a: {
                                    color: "#00deff",
                                },
                            }
                   },
               },
            },

            data:[
                {value:9000, name:'已完成',itemStyle:{
                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#00f5ff" // 0% 处的颜色
                    }, 
                     {
                        offset: 1,
                        color: "#00e0ff" // 100% 处的颜色
                    }], false),
                },},
                {value:3000, name:'未完成',itemStyle:{
                    color:'#888f9b',
                }},
            ]
        },
        //签约完成02
        {
            name:'签约完成率',
            center: ['70%', 'center'],
            type:'pie',
            radius: ['60%', '40%'], 
            hoverAnimation: false,
            label: {
                    normal: {
                        show: true,
                        position: 'center',
                        formatter:function (argument) {
                            var html;
                            html='签约\r\n\r\n'+'完成率';
                            return html;
                        },
                        textStyle:{
                          fontSize: 14,
                            color:'#e8ecf0'
                        },

                    }
                },
            data:[
                {value:9000, name:'已完成',itemStyle:{
                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#00f5ff" // 0% 处的颜色
                    }, 
                     {
                        offset: 1,
                        color: "#00e0ff" // 100% 处的颜色
                    }], false),
                },},
                                {value:3000, name:'未完成',itemStyle:{
                    color:'#888f9b',
                }},
            ]
        },
    ]
};
;