当前位置： 移动技术网 > IT编程>开发语言>JavaScript > echarts白色实心环形图（空心饼图）的编写

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

2019年10月30日  | 移动技术网IT编程  | 我要评论 
// 数据接入机构统计
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);

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网