echarts画图表当数据全为0时显示一张图片和暂无数据的一句话
时间: 2024-04-22 14:23:05 浏览: 47
echart图表问题
可以使用ECharts中的graphic组件,在数据为空时添加一个图片和文字。例如:
```javascript
option = {
...
graphic: {
elements: [{
type: 'image',
id: 'nodata',
left: 'center',
top: 'middle',
z: 100,
bounding: 'raw',
style: {
image: 'https://your.image.url/nodata.png',
width: 200,
height: 200
}
}, {
type: 'text',
id: 'nodataText',
left: 'center',
top: 'middle',
z: 100,
bounding: 'raw',
style: {
text: '暂无数据',
fill: '#999',
fontSize: 16
}
}]
},
series: [{
...
data: [0, 0, 0, 0], // 假设数据全为0
...
}]
};
```
在上面的代码中,我们在graphic组件中添加了一个图片和一段文字,它们的ID分别为`nodata`和`nodataText`。当数据为空时,ECharts会自动显示这个图片和文字。你可以根据需要更改图片和文字的样式。
阅读全文