echarts 给饼图添加背景图
时间: 2023-10-12 19:13:20 浏览: 222
echarts饼图素材
要给 echarts 饼图添加背景图,可以通过以下步骤来实现:
1. 在 option 中添加一个图片对象,用于设置背景图:
```
option = {
...
graphic: [{
type: 'image',
id: 'background',
z: -1,
left: 'center',
top: 'middle',
bounding: 'raw',
origin: [75, 75],
style: {
image: 'path/to/image.jpg',
width: 150,
height: 150
}
}],
...
};
```
2. 在 series 中添加一个 labelLine 对象,并将 show 属性设置为 false,以隐藏饼图的连线。这样才能看到背景图。
```
series: [{
...
labelLine: {
show: false
},
...
}]
```
3. 将 graphic 中的图片对象绑定到 series 中的饼图上。
```
series: [{
...
graphicId: 'background',
...
}]
```
完整的代码如下:
```
option = {
...
graphic: [{
type: 'image',
id: 'background',
z: -1,
left: 'center',
top: 'middle',
bounding: 'raw',
origin: [75, 75],
style: {
image: 'path/to/image.jpg',
width: 150,
height: 150
}
}],
series: [{
type: 'pie',
data: [...],
radius: ['40%', '70%'],
label: {
show: false
},
labelLine: {
show: false
},
graphicId: 'background',
itemStyle: {
...
}
}]
...
};
```
注意:需要将图片的宽高 origin 属性设置为图片的中心点坐标,以确保图片居中显示。
阅读全文