echarts显示暂无数据

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

小白记事录

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

阅读量2w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41283108/article/details/96432213

本文介绍如何使用ECharts库初始化图表，并根据数据状态显示图表或提示信息。包括设置图表的位置、大小，以及如何根据数据是否存在来决定是否加载图表。

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

（注意自己是3之前还是之后的版本）
1、初始化图表的位置、大小啥的

 <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div id="userBox" class="chart-box"></div>
          </el-card>
        </el-col>
   </el-row>

2、初始化数据
this.data = …（查询出来的结果）
3、判断是否有数据

if (this.data.length !== 0) {
          // 初始化图表
          this.chartUser = this.$echarts.init(document.getElementById('userBox'))
          this.chartUser.setOption(option)
          window.addEventListener('resize', () => {
            this.chartUser.resize()
          })
        } else {
        // 以下是暂无数据显示样式(样式根据本身需求进行调整)
          var html = '<div><sapn style="font-size: 18px;font-weight: bold;">参与用户数</sapn><span  style="position: absolute;top: 40%;margin-left: 10%;color:#868686; font-size: 20px;">暂无数据</span></div>'
          document.getElementById('userBox').innerHTML = html
          document.getElementById('userBox').removeAttribute('_echarts_instance_')
        }

其中很重要的一点就是 document.getElementById(‘userBox’).removeAttribute(‘echarts_instance’)
如果没有加入这一条的话，当你跳转暂无数据页面，则无法返回有数据的界面。
_echarts_instance_不能创建多个实例，所以需删除。