【echarts图表】提示暂无数据

最新推荐文章于 2025-11-04 10:27:32 发布

原创最新推荐文章于 2025-11-04 10:27:32 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍了如何在ECharts图表数据为空数组时，使用`noDataBox`样式进行提示，包括使用`innerHTML`插入自定义样式和ElementUI元素，并提供了完整代码示例。

【echarts图表】提示暂无数据

背景：echarts图表数据有时候为空数组`[ ]`，这时候渲染图表异常，需要提示暂无数据

// 提示 暂无数据 : noDataBox 样式
this.$nextTick(() => {
  const dom = document.getElementById("echartsId");
  dom.innerHTML = '<div class="noDataBox"><p class="title">' + '图表名称' + '</p><el-empty description="暂无数据"></el-empty></div>';
  dom.removeAttribute('_echarts_instance_');
})

::v-deep .noDataBox{
  text-align: center;
  p.title{
    font-weight: 600;
    margin: 10px 0 20px 0;
    font-size: 18px;
    font-family: 'sans-serif';
  }
}