首页 > 其他 > 详细

echarts 饼图中间添加图片

时间:2020-09-03 14:53:56      阅读:916      评论:0      收藏:0      [点我收藏+]

饼图添加图片只需要配置两部分

option = {
    graphic: { // 这个属性可以在饼图内部填充图片,文字等
        elements: [{
            type: ‘image‘,//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            style: {
                image: giftImageUrl, //这里添加图片地址
                width: 110,
                height: 120
            },
            left: ‘center‘,//
            top: ‘middle‘ //配置图片居中
        }]
    },
   
    series: [{
        type: ‘pie‘,
        radius: [‘27%‘, ‘45%‘],//在这里配置外半径值,和外半径可视部分的大小
        center: [‘50%‘, ‘50%‘],
        color: [‘#0E7CE2‘, ‘#FF8352‘, ‘#E271DE‘, ‘#F8456B‘, ‘#00FFFF‘, ‘#4AEAB0‘],
        data: data,
        labelLine: {
            normal: {
                show: false,
                length: 20,
                length2: 20,
                lineStyle: {
                    color: ‘#12EABE‘,
                    width: 2
                }
            }
        },
       
    }]
};

echarts 饼图中间添加图片

原文:https://www.cnblogs.com/changx/p/13607382.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!