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

最新推荐文章于 2025-06-25 17:33:41 发布

原创最新推荐文章于 2025-06-25 17:33:41 发布 · 1.3w 阅读

3 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在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">