在echarts中,怎么在饼状图中间加一个图片,没遇到过这种,求解
事先做一个背景图片只有中心是你所需要的图片,其余部分均为透明白色,然后设置为饼图的图片就可以了
加了中心是白色花朵背景图后效果图如下:
var img = "https://img0.baidu.com/it/u=4260719975,1530958102&fm=253&fmt=auto&app=138&f=PNG?w=650&h=650",
option = {
graphic: {
elements: [
{
type: 'image',
// z: 3,
style: {
image: img,
width: 200,
height: 200,
},
left: 'center',
top: 'center',
},
],
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: [
'Direct',
'Marketing',
'Search Engine',
'Email',
'Union Ads',
'Video Ads',
'Baidu',
'Google',
'Bing',
'Others'
]
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{ value: 1048, name: 'Baidu' },
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 251, name: 'Google' },
{ value: 234, name: 'Union Ads' },
{ value: 147, name: 'Bing' },
{ value: 135, name: 'Video Ads' },
{ value: 102, name: 'Others' }
]
}
]
};
graphic: {//图形中间图片
elements: [{
type: "image",
style: {
image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F27%2F20150927124837_KeRUL.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651219937&t=cd810aaa55f2b18881793b0d577aac9d",//你的图片地址
width: 100,
height: 100,
},
left: "center",
top: "center",
}],
},
https://echarts.apache.org/zh/option.html#graphic.id
https://blog.csdn.net/weixin_42729938/article/details/123901475