echarts 餅圖中間添加圖片


餅圖添加圖片只需要配置兩部分

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM