echarts饼图添加图片

最新推荐文章于 2024-04-25 16:41:54 发布

白黑besos

最新推荐文章于 2024-04-25 16:41:54 发布

阅读量2k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/cxc199459/article/details/127083536

版权

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

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
                }
            }
        },
       
    }]
};