首页 前端知识 echarts无数据的展示内容,用graphic属性配置

echarts无数据的展示内容,用graphic属性配置

2025-03-09 15:03:20 前端知识 前端哥 58 27 我要收藏

echarts无数据的展示内容,用graphic属性配置

当echarts无数据的时候,图表展示的是个空白部分,感觉会有点丑,影响页面美观,这时候翻阅了echarts的官网,让我找到个配置项,试试发现还可以,:需要的可以直接复制修改,代码如下:

option = {
  legend: {
    data: []
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{value} C'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    show: false,
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  yAxis: {
    show: false,
    type: 'category',
    axisLine: { onZero: false },
    axisLabel: {
      formatter: '{value} km'
    },
    boundaryGap: true,
    data: []
  },
  graphic: [
    {
      type: 'text', // 类型:文本
      left: 'center',
      bottom: '150px',
      silent: true, // 不响应事件
      invisible: 0, // 有数据就隐藏 注:只需要判断这里的值为0 还是为1
      style: {
        fill: '#9d9d9d',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '24px'
      }
    },
    {
      type: 'image', // 类型:文本
      left: 'center',
      bottom: '200px',
      invisible: 0, // 有数据就隐藏 注:只需要判断这里的值为0 还是为1
      style: {
        width: 150,
        height: 150,
        image:
          'http://img.mp.itc.cn/upload/20170724/cf678e09eb384401aa616ba134126357_th.jpg'
      }
    }
  ],
  series: []
};

有无数据的时候 ,只需要判断 graphic的invisible的值即可 ,比如判断数据的为空的时候invisible = 0,有数据的时候 invisible = 1。

无数据展示的效果如下图
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23064.html
标签
评论
发布的文章

Autoware安装教程

2025-03-09 15:03:40

【C 】map详解

2025-03-09 15:03:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!