echarts图表柱状图没数据时不显示数据展示_echarts柱状图数据为0隐藏

<Card :bordered="false" style="margin-bottom: 20px;">
    <p slot="title">返佣汇总</p>
    <Row :gutter="10" style="margin-bottom:20px;">
        <i-col span="8">
            <div class="charts" ref="rebateAmount" style="height:252px;margin-top:10px;"></div>
            <div style="text-align: center;font-size: 16px;color: #333;">手续费金额</div>
        </i-col>
    </Row>
</Card>

<script src="../../../js/echarts.common.min.js"></script>

<script src="../../../js/jquery-1.11.3.js"></script>

data: function () {
    return {
        rebateAxis: ['返佣收款金额', '返佣退款金额', '返佣收款手续费', '返佣分期手续费', '返佣实际入账'],
        rebateMoneyDataAll:'9999',  //返佣总金额
        rebateMoneyData: [
        {value:1000, name:'返佣收款金额',itemStyle:{
               normal:{
                    label:{
                        show: true,
                    },
                    labelLine: {
                        show: true
                    }
               }
            }},
            {value:2000, name:'返佣退款金额',itemStyle:{
               normal:{
                    label:{
                        show: true,
                    },
                    labelLine: {
                        show: true
                    }
               }
            }},
            {value:4000, name:'返佣收款手续费',itemStyle:{
               normal:{
                    label:{
                        show: true,
                    },
                    labelLine: {
                        show: true
                    }
               }
            }},
            {value:3000, name:'返佣分期手续费',itemStyle:{
               normal:{
                    label:{
                        show: true,
                    },
                    labelLine: {
                        show: true
                    }
               }
            }},
            {value:0, name:'返佣实际入账',itemStyle:{
               normal:{
                    label:{
                        show: true,
                    },
                    labelLine: {
                        show: true
                    }
               }
            }},
        ]
    }
},

methods:{

getList:function(){

success: function (data) {
    if (data.status === 200) {
        _this.rebateInfo(_this.rebateAxis, _this.rebateMoneyData);
    } else {
        _this.$Message.error(data.message);
    }
},

},

rebateInfo: function (rebateAxis, rebateMoneyData) {
    var _this = this;
    var charts = _this.$refs.rebateAmount;
    option = {
        title: {
            text: '返佣总金额',
            x: 'center',
            y: 'center',
            top: '100',
            textStyle: {
                fontSize: 16,
                color: '#666',
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: '140px',
            z: 2,
            zlevel: 100,
            style: {
                text: '￥' + parseInt(_this.rebateMoneyDataAll),
                width: 100,
                height: 30,
                color: '#333',
                fontSize: 16
            }
        },
        series: [
            {
                name: '返佣账单',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
 
                label: {
                    show: false,
                    position: 'center',
 
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '30',
                        fontWeight: 'bold'
                    },
                },
                labelLine: {
                    show: false
                },
                data: rebateMoneyData
            }
        ]
    };
    var opt = option.series[0];
    lineHides(opt);
    //数据为零时隐藏线段
    function lineHides(opt) {
        jQuery.each(opt.data, function (i, item) {
            if (item.value == 0) {
                item.itemStyle.normal.labelLine.show = false;
                item.itemStyle.normal.label.show = false;
            }
        });
    }
    //自适应宽高
    var myChartContainer = function () {
        _this.$refs.rebateAmount.style.width = _this.$refs.formInline.innerWidth + 'px';
        _this.$refs.rebateAmount.style.height = _this.$refs.formInline.innerHeight + 'px';
    };
    myChartContainer();
    var myChart = echarts.init(charts, 'macarons');
    this.rebateList.push(myChart);
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
 
    //浏览器大小改变时重置大小
    window.onresize = function () {
        myChartContainer();
        for (var i = 0; i < _this.rebateList.length; i++) {
            _this.rebateList[i].resize();
        }
    };
 
},

},

附加一段大屏数据开发、前端可视化的网址：

https://www.isqqw.com/