Echarts实战案例代码(24)：柱图数据顶部显示图片的解决方案

在Echarts中，为了在柱状图的顶部显示图片，我们需要使用’graphic’属性，并且需要为每个柱状配置一个’graphic’节点。下面是一个具体的实现例子：
```javascript
var option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
series: [{ //柱状图数据
data: [120, 200, 150, 80, 70, 110, 130],
type: ‘bar’,
showBackground: true,
backgroundStyle: {
color: ‘rgba(220, 220, 220, 0.8)’
},
itemStyle: {
color: ‘#333’
},
emphasis: {
itemStyle: {
color: ‘#FF0000’
}
},
label: {
show: true,
position: ‘top’, // 标签显示位置在柱状顶部
formatter: ‘{b}
{c} ({d}%)’ // 数据格式化显示方式
},
// 添加图形元素到柱状顶部
graphic: [{
type: ‘image’, // 图形元素类型为图片
style: {
image: ‘https://example.com/path/to/image1.png‘, // 图片地址
left: ‘center’, // 水平居中显示图片
top: ‘-15px’, // 距离顶部15像素位置显示图片
width: ‘auto’, // 图片宽度自适应内容宽度
height: ‘auto’ // 图片高度自适应内容高度
}
}, {
type: ‘image’, // 图形元素类型为图片
style: {
image: ‘https://example.com/path/to/image2.png‘, // 图片地址
left: ‘center’, // 水平居中显示图片
top: ‘-15px’, // 距离顶部15像素位置显示图片
width: ‘auto’, // 图片宽度自适应内容宽度
height: ‘auto’ // 图片高度自适应内容高度
}
}]
}]
};
echarts.init(document.getElementById(‘main’)).setOption(option); //初始化图表并设置选项