Echarts柱状图使用最小高度解决数据差距过大，且过滤数据为0的情况

最新推荐文章于 2024-05-25 13:58:17 发布

黑魔法师乌漆嘛黑

最新推荐文章于 2024-05-25 13:58:17 发布

阅读量9.5k

点赞数 9

文章标签： echarts js html

本文链接：https://blog.csdn.net/qq_41137858/article/details/119327240

版权

1.问题描述：柱状图两条数据差距过大时，数据小的那一条会难以显示，甚至消失，如下图：

数据是1，但和上面的800比实在太小，肉眼已经看不到了。

解决方法：series中添加最小高度（barMinHeight），添加最小高度为5（barMinHeight:5,），上述问题解决。

但是，新问题出现了，数据为0也会显示最小高度，如下图：

2.问题描述plus：要求有最小高度，且过滤数据为0的情况。

解决思路：使用函数判断数据，过滤数据0，要知道，echarts里的每个属性都可以写函数的，在最小高度barMinHeight里写个函数是可以的。

//最小高度中写自定义函数                
barMinHeight: (function(data){
   
    //判断数据是否为0
    if (data.value == 0) {
        //是0则不设置高度，否则设置最小高度5
        return 0;
    } else {
        return 5;
    }
})(),

想法是好的，可惜，function的data是没有定义的，也就是说，这个函数会报错，需要进一步加工，使用全局变量传值进函数中。修改后的函数如下：

//这里的optionData是全局变量  
barMinHeight: (function (optionData) {
                
    //观察数据格式
    console.log(optionData);

    //使用for循环遍历数组
    for(var i=0;i<optionData.length;i++){
        if (optionData[i] == 0) {
            return 0;
        } else {
            return 5;
        } 
    }
})(optionData),

使用了一个全局变量存储数据，这个全局变量使用也很方便，还可以用来存储后台传来的json数据。

我的data格式是数组格式，使用for循环遍历，遇到0则返回，但是又有新的问题，函数返回之后就会结束循环，只能过滤第一条为0的数据，如果遇到多个数据还是会出问题。

3.解决方法

在数据下面遍历，将0数据置为空，空数据就不会显示了。

    optionData.forEach((v,index) => {
                if (v == 0)
                optionData[index] =null;
            });

如果想要柱形图显示0数据，那么在tooltip中还得还原成数据0。

附全部代码：


<!DOCTYPE html>
<html>
<!-- 测试柱状图的最小长度 -->
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <div id="main" style=" width: 500px;height: 500px;
    margin: 0 auto;"></div>
</body>
<!-- echarts版本：5.1.2 -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var optionData= [0, 1, 800,0];
    optionData.forEach((v,index) => {
                if (v == 0)
                optionData[index] =null;
            });
            console.log(optionData);
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter:function(params) {

            }
        },
 
        xAxis: {
            type: 'value',
        },
        yAxis: {
            type: 'category',
            data: ['q', 'w','e','r']
        },
        series:
        {
            
            data:optionData,
            name: 'test',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 50,
            barMinHeight:5,
        }
    };
    myChart.setOption(option);

</script>
 
</html>

黑魔法师乌漆嘛黑

关注

9
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Echarts柱状图使用最小高度解决数据差距过大，且过滤数据为0的情况

1.问题描述：柱状图两条数据差距过大时，数据小的那一条会难以显示，甚至消失，如下图：数据是1，但和上面的800比实在太小，肉眼已经看不到了。解决方法：series中添加最小高度（barMinHeight），添加最小高度为5（barMinHeight:5,），上述问题解决。但是，新问题出现了，数据为0也会显示最小高度，如下图：2.问题描述plus：要求有最小高度，且过滤数据为0的情况。解决思路：使用函数判读数据，过滤数据0，要知道，echarts里的每个熟悉都可以写函数..
复制链接

扫一扫