echarts 饼状图没有数据时的展示

本文探讨了在Echarts中,当饼状图数据为空时如何优雅地展示和处理这种情况,包括设置默认提示信息、显示占位符图形等方法。
function getScrapItemTop5() {
                var queryData = {
                    
                };
                $.ajax({
                    url: "../../MesRoot/Board/queryScrapItemTop5",
                    type: 'post',
                    async: false,     //默认为true 异步
                    cache:false,
                    data: queryData,
                    error: function () {
                    },
                    success: function (data) {
                        if((data.namelist.length > 0)&&(data.ratelist.length > 0)){
                            scrapItemTop5Image.style.display="none";
                            scrapItemTop5El.style.display='block';
                            showView2(data);
                        }else{
                            scrapItemTop5Image.style.display="block";
                            scrapItemTop5El.style.display='none';

                        }


                    }
                });
            }
function showView2(data) {
                var name = data.namelist;
                var datalist = [];
                if (data.ratelist.length > 0) { //说明该对象是有数据的
                    for (var i = 0; i < data.ratelist.length; i++) {
                        var obj = data.ratelist[i];
                        datalist.push({
                            value: obj.value,
                            name: obj.name
                        });
                    }
                }
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    color: ['#E4443C', '#F27714', '#F2B63F', '#F2E33F', '#42DBA2', '#47C1E5', '#3C69E8', '#1540BC', '#9C8AF9', '#FDA4D7', '#b1606d'],
                    legend: {
                        orient: 'vertical',
                        right:'left',
                        textStyle:{
                            color:'#fff',
                            fontSize:18,
                        },
                        bottom: '5%',
                        icon: 'circle',
                        // itemWidth: 6,
                        // itemHeight: 6,
                        data: name
                    },
                    series: [
                        {
                            name: zhiyin.i18n.translate("com.zhiyin.mes.app.web.scrap_item"),
                            type: 'pie',
                            radius: '60%',
                            center: ['50%', '50%'],
                            data: datalist,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{d}%',
                                        textStyle : {
                                            //fontWeight : 'normal',
                                            fontSize : 20,
                                            color:'#fff'
                                        }


                                    }
                                }

                            },
                            labelLine: {
                                show: true,
                                normal:{
                                    length:5,  // 改变标示线的长度
                                    lineStyle: {
                                        color: "#fff"  // 改变标示线的颜色
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart3.setOption(option);
            }
 <div id="scrapItemTop5" style="height: 400px;width: 580px;"></div>
 <img id="scrapItemTop5Image" src="../../3rdTools/images/cheer.png">
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值