使用echarts当数据为空时展示空状态占位图

最新推荐文章于 2024-05-20 11:37:21 发布

段友吊缠腰

最新推荐文章于 2024-05-20 11:37:21 发布

阅读量7.3k

点赞数 13

分类专栏： vue 前端 canvas 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43586648/article/details/118363037

版权

vue 同时被 3 个专栏收录

28 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

canvas

5 篇文章

订阅专栏

本文介绍了一种在ECharts中优雅地处理空数据的方法，通过自定义组件和样式实现了一个提示信息，当数据为空时会在图表中央显示特定的图片和文字说明。

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

在开发echarts的时候我们不得不考虑数据为空的情况，其实有很多种解决办法，我自己是这样做的，有更好的办法请私信我，共同学习。
大概长这样：
在这里插入图片描述

创建你的utils:

export const setNotopt = (demo,subtext = '暂无数据')=> {
    var option = {
        title: {
            text: ' {a|}',
            x: 'center',
            y: 'center',
            subtext,
            itemGap: -20,
            textStyle: {
                rich: {
                  a: {
                    color: '#000',
                    fontSize: '16',
                    height: 80,
                    width: 160,
                    backgroundColor: {
                      image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==',
                    }
                  },
                }
            },
            subtextStyle: {
              fontSize: 16,
            }
        }
    }
    demo.setOption(option,true)
  }

在使用的页面引入：

import { setNotopt } from ‘@/util/utils.js’

在接口返回后使用：

        if (res.data.length == 0) {
          return setNotopt(chartDom,'糟糕！数据找不到了')
        }