Echarts 柱状图当值为0时不显示在图像顶部

最新推荐文章于 2024-12-05 18:03:35 发布

F小滚石R

最新推荐文章于 2024-12-05 18:03:35 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39840470/article/details/106475963

Vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

echarts

5 篇文章

订阅专栏

本文介绍如何在ECharts中优化显示零值的柱状图，通过配置series下的label参数，实现在值为0时不显示标签，提升图表的视觉效果。

在做柱状图时，遇到这么一个场景，如下图：
在这里插入图片描述
当Sun值为0的时候这样显示看上去很不协调，于是配置当值为0的时候不显示
在series配置项下加上如下代码

// 以下为是否显示，显示位置和显示格式的设置
                label: {
                  show: true,
                  fontSize: 18,
                  position: 'top',
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  }
                }