首页 前端知识 Echarts 无数据时显示“暂无数据”

Echarts 无数据时显示“暂无数据”

2024-02-28 11:02:51 前端知识 前端哥 698 420 我要收藏

当我们的图表遇到接口数据为空或者筛选之后无数据的情况,会显示成这样

就比较丑,所以需要更换成指定的某些文字做提示

通过配置title,曲线救国

title: {
    show: true,
    text: '暂无数据',
    left: "center",
    top: 'center'
  }

那它就会变成这样

 那我连这个圆都不想要了呢?

在series中配置「showEmptyCircle」为false就可以了,这里是以pie为例,它就变成这样

 那我要是连那个「Access From」这几个字都不要了呢,把name也去掉哈哈哈哈哈哈哈,不过这只是文字版的,如果要更换成图片,要另外尝试了,我也没试过~

以下为全部代码

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  title: {
    show: true,
    text: '暂无数据',
    left: "center",
    top: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center'
      },
      showEmptyCircle: false,
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [

      ]
    }
  ]
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2894.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!