Echarts 多列柱状图中其中某一列数据为0时不占位

        initChart3() {
            const chartDom = this.$refs.chart3;
            const myChart = this.$echarts.init(chartDom);
            let legenddata = ['>10000','10000-5000','5000-1000','1000-500','500-100' ]
            let datalist=[
                {
                    name:'万州区',
                    data:[5,'',3,1,4]
                },
                {
                    name:'开州区',
                    data:['',2,3,1,5]
                },
                {
                    name:'云阳县',
                    data:[7,2,3,'',6]
                },
                {
                    name:'奉节县',
                    data:[5,2,'',2,2]
                },
                {
                    name:'巫山县',
                    data:['',2,4,'',2]
                },
            ]
            let xAxis=[]
            let xAxisitem={
                type: 'category',
                data: '',
                position: 'bottom',
                axisTick: {
                    show: false
                },
                axisLine:{
                    show :true,
                    lineStyle:{
                        color:"#EBEBEB",
                    },
                },
                nameTextStyle:{
                    color:"#797979",
                },
                axisLabel:{
                    color:"#797979",
                },
            }
            let xAxisitemdata=[]
            for (let i = 0; i < datalist.length ; i++) {
                xAxisitemdata=[]
                for (let i = 0; i < datalist.length ; i++) {
                    xAxisitemdata.push('')
                }
                xAxisitemdata[i]=datalist[i].name
                xAxisitem.data=JSON.parse(JSON.stringify(xAxisitemdata))
                xAxis.push(JSON.parse(JSON.stringify(xAxisitem)))
            }
            console.log("xAxis",xAxis)
            let series=[]
 
            for (let j = 0; j < datalist.length; j++) {
                for (let i = 0; i < datalist[j].data.length; i++) {
                    let newArrList = [];
                    for (let a = 0; a < j; a++) {
                        newArrList.push("");
                    }
                    newArrList[j] = datalist[j].data[i];
                    for (let k = 0; k < legenddata.length; k++) {
                        let seriesitem={
                            type: 'bar',
                            name:legenddata[i],
                            barWidth: '10',
                            xAxisIndex: j,
                            data: newArrList,
                        }
                        let a = j % legenddata.length;
                        if(datalist[j].data[i] && k===a){
                            series.push(JSON.parse(JSON.stringify(seriesitem)))
                        }
                    }
                }
            }
            console.log("series",series)
            let series1= JSON.parse(JSON.stringify(series))
 
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    // 进行数据处理,去掉提示框中一些x轴坐标为空的数据显示.
                    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;
                    }
                },
                legend: {
                    itemHeight:13,
                    data:legenddata,
                    textStyle: {
                        fontSize: 14,
                        height: 10,
                        rich: {
                            a: {
                                verticalAlign: 'middle',
                            },
                        },
                    },
                },
                grid: {
                    left: "5%",
                    right: "5%",
                    top: "20%",
                    bottom: "10%",
                },
                xAxis: xAxis,
                yAxis: [
                    {
                        type: 'value',
                        splitLine:{
                            show :false
                        },
                        name:'（家）',
                        axisLine:{
 
                            show :true,
                            lineStyle:{
                                color:"#EBEBEB",
                            },
                        },
                        nameTextStyle:{
                            color:"#797979",
                        },
                        axisLabel:{
                            color:"#797979",
                        },
                    }
                ],
                series:series1
            };
            myChart.setOption(option)
            myChart.on('click',function (param) {})
        },复制