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

Posted 2020-12-01 zhanyuefeixian

// 数据接入机构统计
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);