echarts渲染空数据的处理

最新推荐文章于 2025-06-25 17:33:41 发布

原创最新推荐文章于 2025-06-25 17:33:41 发布 · 6k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts空数据显示 #echarts暂无数据

echarts使用心得专栏收录该内容

7 篇文章

订阅专栏

当Echarts渲染的数据为空时，页面显示空白可能给用户带来困惑。通过配置option.title，可以在无数据时显示占位提示，如设置`show: companies.length === 0`来控制提示的显示，并自定义样式。此外，可以使用`myChart.showLoading()`方法展示加载提示，通过调整加载提示的样式，使其在无数据时更显友好。这种方法能有效提升用户体验。

echarts在渲染进，如果后台返回的数据为空，页面会一片空白，这样对用户很不友好。我们可以稍微处理一下。
在option里配置title属性：

var option = {
      title: { // 无数据时占位用
        show: companies.length === 0, // 判断有没有数据，没有则show为true
        textStyle: {
          color: '#ccc',
          fontSize: 18
        },
        text: "暂无数据",
        left: "center",
        top: "center"
      }
}

根据后台返回的数据companies来设置title的show属性的值
效果如下：
在这里插入图片描述
还可以使用showLoading()来展示：

if(companies.length === 0) {
    myChart.showLoading({
       	text: '暂无数据',
        fontSize: 18,
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#ccc',// 文字颜色
        maskColor: 'rgba(255, 255, 255, 0.2)' // 背景色
    })
 }