echarts没有数据时不显示空折线图,显示一片空白怎么办
时间: 2023-08-26 19:03:37 浏览: 275
源码:el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据
可以通过设置 echarts 的 `option` 中的 `noDataLoadingOption` 属性来实现当数据为空时显示一个自定义的提示。
具体操作步骤如下:
1. 在 `option` 对象中添加 `noDataLoadingOption` 属性:
```
option = {
noDataLoadingOption: {
text: '暂无数据', // 自定义提示文本
effect: 'bubble', // 自定义提示效果,可选值:'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
effectOption: { // 自定义提示效果的配置项
effect: {
n: 0
}
}
},
...
}
```
2. 通过调用 `setOption` 方法来判断数据是否为空:
```
if (data.length === 0) {
myChart.setOption({
series: [], // 如果数据为空,则将 series 设置为空数组
...option.noDataLoadingOption
});
} else {
myChart.setOption({
series: [{
data: data,
type: 'line'
}],
...option
});
}
```
其中,`myChart` 是 echarts 实例化后的对象,`data` 是图表的数据。如果数据为空,则将 `series` 设置为空数组,并将 `noDataLoadingOption` 属性合并到 `option` 对象中。否则,将数据添加到 `series` 中,并将 `option` 对象传入 `setOption` 方法中。
这样,当数据为空时,就会显示一个自定义的提示,而不是一片空白。
阅读全文