echarts 饼图中间添加图片

2022-10-29,,,

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

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图中间添加图片的相关教程结束。

《echarts 饼图中间添加图片.doc》

下载本文的Word格式文档,以方便收藏与打印。