echarts 饼图 我现在的效果是这样的，我想在中间加出来空白圈的怎么实现呢？

Question

我现在的效果

预期想要的效果

我现在想要中间的圈和中间的文字，这个怎么实现呢？

我现在的配置是这样的

var optionFH = {
                    title: {
                        // text: '同名数量统计',
                        // subtext: '纯属虚构',
                        x: 'center'
                    },
    
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                     
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: ["11","22","33","44"],

                        selected:["11","22","33","44"],
                    },
                    color:["#38AC6D","#E54E55"],//饼图颜色
                    series: [{
                        name: '装机',
                        type: 'pie',
                        radius: '55%',
                         // avoidLabelOverlap: false,
                        center: ['50%', '50%'],
                        data: [
                            {"name":"风电装机","value":489,selected:true},
                            {"name":"火电装机","value":689, selected:true},
                        ],
                        
                        itemStyle: {
                            emphasis: {
//                                 shadowBlur: 10,
                                // shadowOffsetX: 100,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]

                }

Answer 1

radius: '55%',

改成

radius: ['50%', '70%'],

就有中间空白的效果了，当然要达到你预期还得一些细节调整
比如中间文字啥的，参见下这个例子

Answer 2

app.title = '环形图';

option = {
    title: {
        text: '所占比重',
        top:380,
        x: 'center',
        textStyle:{
            fontSize:35
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: ["11","22","33","44"],
        selected:["11","22","33","44"],
    },
    color:["#38AC6D","#E54E55"],//饼图颜色
    series: [{
        radius: ['50%', '70%'],
        name: '装机',
        type: 'pie',
        // radius: '55%',
         // avoidLabelOverlap: false,
        // center: ['50%', '50%'],
        data: [
            {"name":"风电装机","value":489,selected:true},
            {"name":"火电装机","value":689, selected:true},
        ],
        
        itemStyle: {
            emphasis: {
//                                 shadowBlur: 10,
                // shadowOffsetX: 100,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]

};

Answer 3

http://gallery.echartsjs.com/...

Answer 4

http://echarts.baidu.com/exam...