首页 前端知识 设置echarts多维柱状图数据为0的柱子不显示

设置echarts多维柱状图数据为0的柱子不显示

2024-03-26 08:03:30 前端知识 前端哥 480 433 我要收藏

设置echarts多维柱状图数据为0的柱子不显示

  • 原来的柱状图展示
  • 在每一个series下的label里添加一下代码
  • 添加之后的图示
  • 原来的信息展示(图例)
  • 在tooltip下添加
  • 效果图
  • 求大佬指教

原来的柱状图展示

底部有0

在每一个series下的label里添加一下代码

formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return " ";
}
},
复制

添加之后的图示

在这里插入图片描述

原来的信息展示(图例)

在这里插入图片描述

在tooltip下添加

(注意:是tooltip{}后面,不是里面)

formatter: function (params) {
var html = "";
if (params.length != 0) {
// 可以自己打印一下console.info(params[0]);
var getName = params[0].name;
html += getName + "<br/>";
for (var i = 0; i < params.length; i++) {
// 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
if (
params[i].value != null &&
params[i].value != 0 &&
params[i].value != ""
) {
html += params[i].marker;
html +=
params[i].seriesName + ": " + params[i].value + "<br/>";
}
}
}
return html;
},
复制

效果图

在这里插入图片描述
至此已经完成我们预期的效果。

求大佬指教

但是,我发现在柱状图上,虽然为0的柱子不在显示,但是它依旧在x轴上占着位置,求大佬指教。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4161.html
标签
评论
还可以输入200
共0条数据,当前/页
会员中心 联系我 留言建议 回顶部
复制成功!