Echars 柱状图为0的数据不显示（包括悬浮时）

1、先来个效果图，仔细看第二步， 其它的可以忽略: 

 2、想柱状图为0的数据不显示，以及悬浮时也不显示一共需要两步：

# 第一步控制柱状图为0的不生成柱状图。
# 大家应该知道option里面有一个series属性是来控制数据生成的，series是一个数组，数组里面存放的是对象；
# 假如这个对象是_series = {}， series属性的第0个

_serie = {
    name: '',        // 名称
    type: 'bar',    // 柱状图
    label: labelOption, // labelOption 是一个对象
    data:[]    // 数据
}

# 注意可能柱状图有很多种，想找到normal对象，有的可能不是label，有的可能是

itemStyle: {
    normal: {color: 'rgba(0,0,0,0.05)'}
},

# 有的可能都没有，没有的一般如果没数据就不会显示。

# 接下来进入labelOption对象，labelOption函数里面有一个normal对象，normal对象里面有一个formatter属性

# 我们只需要重写就行了。

var labelOption = {
    normal: {
        formatter: function(params) {
            // 可以打印自己看一下, 其实params就是每根柱子的对象
            console.info(params);
            var html = '';
            if (params.value > 0) {
                // 千万不要html += '';
                html = params.value + '次  ' + params.seriesName;
                return html;
            }
            // 没有数据的返回'' 不是返回0
            return html;
        },
    }
};

# 说白了就是找到normal然后重写值，重写之后，柱状图为0的就不会显示了。但是鼠标悬浮的时候还是会有，接下来我们再重写一下

option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // 进行数据处理
            formatter: function (params) {
                var html = '';
                if (params.length != 0) {
                    // 对应x轴的时间数据  也就是2019-01-01
                    // 可以自己打印一下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 != '') {
                            // params[i].marker 需要加上，否则你鼠标悬浮时没有样式了
                            html += params[i].marker;
                            html += params[i].seriesName + ': ' + params[i].value + '次<br/>';
                        }
                    }
                }
                return html;
            }
        },
}

# 其实也是重写了option===>tooltip===>formatter:重写值，我发现这个不管是折线图和柱状图等，这个方法通用，鼠标悬浮时不显示。此时此刻，控制柱状图为0不显示，悬浮时为0不显示都已完成转换！友情链接：折线图数据为0的不显示！

3、个人代码，因为我的业务不一样，可能有的人看的很蒙，循环看蒙了，之前写了别的图形的，说看的很蒙，这次只把（重要）转换数据的地方给划出来了。下面仅供参考，就是上面效果图的代码，也是echars官网
https://www.echartsjs.com/examples/zh/editor.html?c=bar-label-rotation 这个柱状图形的动态数据生成的代码

$(document).ready(function () {

    // 访问统计图形对象(totalEva 图形div 的ID)
    var totalEva = echarts.init(document.getElementById('totalEva'), 'shine');
    // 自动调节高度
    window.onresize = function(){
        // 自动调节图形大小
        totalEva.resize();
    }

    //  类型 : 1 很满意 2 满意 3 一般;  评价类型名称
    var evaluations = [], evaluationNames = [];

    // 获取到后台传过来的数据
    var data = null;
    $.ajax({
        url: '',
        type: 'post',
        async: false,
        dataType: 'json',
        success: function (res) {
            if (res != null && res.length != 0) {
                for (var i = 0; i < res.length; i++) {
                    // 评价类型名称
                    evaluationNames.push(res[i].evaluationName);
                    // 次数
                    evaluations.push(res[i].evaluation)
                }
                data = res;
            }
        }
    })

    // 去重复
    evaluationNames = removeRepeatArrElement(evaluationNames);
    // 类型 : 1 很满意 2 满意 3 一般;
    evaluations = removeRepeatArrElement(evaluations);

    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };

    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            // formatter: '{c}  {name|{a}}',
            formatter: function(params) {
                var html = '';
                if (params.value > 0) {
                    html = params.value + '次  ' + params.seriesName;
                    return html;
                }
                return html;
            },
            fontSize: 16,
            rich: {
                name: {
                    // 柱形图上面的title颜色
                    textBorderColor: '#fff'
                }
            }
        }
    };

    // 动态生成评价类型名称
    var _seriesArr = [], _series = {};
    for (var i = 0; i < evaluations.length; i++) {
        var evaluation = evaluations[i];
        var title = '';
        if (evaluation == 1) {
            title = '很满意';
        } else if (evaluation == 2) {
            title = '满意';
        } else if (evaluation == 3) {
            title = '一般';
        }
        _series = {
            name: title,
            type: 'bar',    // 柱状图
            label: labelOption,
            data:[]
        }
        // 生成每种评价类型的对应的比列
        // 评价 : 1 很满意 2 满意 3 一般
        var _count = [];
        for (var j = 0; j <  evaluationNames.length; j++) {
            var evaluationName = evaluationNames[j];
            var count = ruleOut(evaluationName, evaluation);
            _count.push(count);
        }
        // 把当前评价的数据放入_series对象、_seriesArr数组中
        _series.data = _count;
        _seriesArr[i] = _series;
    }

    // 通过评价类型，迭代此类型对应的评价  没有返回0
    // evaluation 为评价类型 1 很满意 2 满意 3 一般
    function ruleOut(evaluationName, evaluation) {
        var lastData = 0;
        for (var i = 0; i < data.length; i++) {
            if (evaluation == data[i].evaluation && evaluationName == data[i].evaluationName) {
                lastData = data[i].count;
            }
        }
        return lastData;
    }

    option = {
        title: {
            text: '客户评价统计',
            // subtext: '次',
            left: 'left'
        },
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // 进行数据处理
            formatter: function (params) {
                var html = '';
                if (params.length != 0) {
                    // 对应x轴的时间数据  也就是2019-01-01
                    // 可以自己打印一下console.info(params[0]);
                    var getName = params[0].name;
                    html += getName + '<br/>';
                    for (var i = 0; i < params.length; i++) {
                        // 如果为0 为空的数据我们不要了
                        if (params[i].value != null && params[i].value != 0
                            && params[i].value != '') {
                            // params[i].marker 需要加上，否则你鼠标悬浮时没有样式了
                            html += params[i].marker;
                            html += params[i].seriesName + ': ' + params[i].value + '次<br/>';
                        }
                    }
                }
                return html;
            }
        },
        legend: {
            data: ['很满意', '满意', '一般']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: evaluationNames
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: _seriesArr
    };
    if (option && typeof option === "object") {
        totalEva.setOption(option, true);
    }

})

// 数组去重复
function removeRepeatArrElement(arr){
    var newArr = [];
    var len = arr.length;
    for(var i = 0; i < len; i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}