Echarts pie chart my effect now is like this, I want to add a blank circle in the middle of how to achieve it?

my current effect

clipboard.png

clipboard.png

now I want the middle circle and the middle text. How do I achieve this?

my current configuration is like this

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:["-sharp38AC6D","-sharpE54E55"],//
                    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)"
                            }
                        }
                    }]

                }
Mar.09,2022

radius: '55%',
Change

to

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

has the effect of white space in the middle. Of course, to achieve your expectations, you still have to adjust some details
, such as intermediate text, etc., see this example

.

clipboard.png

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:["-sharp38AC6D","-sharpE54E55"],//
    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)'
            }
        }
    }]

};

http://gallery.echartsjs.com/.


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

Menu