echarts白色实心环形图（空心饼图）的编写

// 数据接入机构统计let myDom = document.getElementById(‘myChart‘);let myWidth = myDom.offsetWidth - 5;            // 获取容器宽度let myHeight = myDom.offsetHeight - 5;          // 获取容器高度let myRadius = myHeight * 0.44 / 2;             // 根据环形图内圈百分比获取内圆半径let myPX = (0.3 - (myRadius / myWidth)) * 100 + ‘%‘;         // 获取白色填充圆在容器中的x轴位置百分比，以便与环形图贴合let myChart = echarts.init(document.getElementById(‘myChart‘));let option = {    title: {                        // 标题样式        text: ‘数据接入机构统计‘,        textStyle: {            color: ‘#cccccc‘,            fontSize: 14        }    },    tooltip: {                      // 悬浮提示        trigger: ‘item‘,        formatter: "{a} <br/>{b}: {c} ({d}%)"    },    legend: {        orient: ‘vertical‘,        top: ‘20%‘,           right: 20,                // 与容器距离调节        icon: ‘circle‘,           // 样式调节  ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘, ‘none‘等        itemWidth: 7,        textStyle: {            color: ‘#ffffff‘,            fontSize: 10,            padding: [0, 0, 0, 5]     //字与图形间的边距        },        data:[‘111‘,‘222‘,‘333‘]    },    graphic: {        elements: [            {                type: ‘group‘,                left: myPX,         // 横坐标位置                top: ‘33%‘,         // 纵坐标位置       55% - （44% / 2）                children: [                    {                        type: ‘circle‘,                        shape: {                            r: myRadius       // 白色圆半径                        },                        style: {                            fill: ‘#fff‘       // 背景颜色                        }                    },                    {                        type: ‘text‘,          // 覆盖在圆上的文字位置和样式                        style: {                            text: 12345,                            y: -10,                            textAlign: ‘center‘,                            fontSize: 12,                            fill: ‘#494949‘                        }                    },                    {                        type: ‘text‘,                        style: {                            text: ‘条‘,                            y: 10,                            textAlign: ‘center‘,                            fontSize: 13,                            fill: ‘#494949‘                        }                    }                ]            }        ]    },    series: [        {            name:‘机构统计‘,            type:‘pie‘,            radius: [‘44%‘, ‘70%‘],        // 环形图大小和粗细            avoidLabelOverlap: false,            center: [‘30%‘, ‘55%‘],        // 环形图位置            label: {                normal: {                    show: false,            // 设置不显示                    position: ‘center‘      // hover时提示在圆环内                }            },            data:[                {value:335, name:‘111‘},                {value:310, name:‘222‘},                {value:234, name:‘333‘}            ]        }    ]};myChart.setOption(option);

原文地址：https://www.cnblogs.com/zhanyuefeixian/p/11758827.html