【echarts图表】提示暂无数据

最新推荐文章于 2025-04-09 21:08:55 发布

zlting~

最新推荐文章于 2025-04-09 21:08:55 发布

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/135774926

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【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';
  }
}