echarts不能正常显示，调试的时候又能正常显示

Question

我用的是echarts 2.2.7 的echarts.min.js，数据没有问题，饼图的函数写法没有错，但是第一次加载时饼图就是不显示，我在调用饼图函数的前面写个alert(1)， 后又能正常显示。用火狐浏览器调试的时候一步一步下去，又是能显示饼图的，但是不调试，重新刷新页面又不能显示。不知怎么解决。

类似的同样问题，图表有显示，我在函数里写myChart.getDataURL ();但是得到的64位编码为空，调试的时候又有了.

我用的是火狐浏览器

Answer 1

控制台是没有报错的，没有异常信息。问题是解决了。解决方法是在页面一开始不能只把echarts.js包含进来，还要把你所用到的，比如pie.js也要包含进来，这样以上的情况就不会出现了。可是echarts的初始化实例里面是只包含了echarts.js的

Answer 2

一般这种情况都是由于异步加载问题，而alert能和debug能出现饼图就是因为它们会中断JS的执行，这样在继续往下走的时候异步的数据已经获取到了。可以用F12看看控制台是不是有异常信息

Answer 3

/*饼图*/

function pie_fail_chart(id,data)

{

    var myChart;

    var imgURL;

    var scroll_div = document.getElementById(id).parentNode;

    scroll_div.scrollTop = scroll_div.scrollHeight * 0.2;

    scroll_div.scrollLeft = scroll_div.scrollWidth * 0.2;

    if( data.data.length == 0 )

    {

        $("#"+id).empty();

        $("#"+id).append("<center><span style='display:inline-block;margin-top:20%;color:#C0C0C2'>当前失败次数为0，暂无失败原因</span></center>");

        return null

    }

    require(

            [

                 'echarts',

                 'echarts/chart/pie'

             ],

    function(ec){

    

    $("#"+id).empty();    

    myChart = ec.init(document.getElementById(id));

    var option = {

        animation:false,

        tooltip : {

            trigger: 'item',

            formatter: "{b} <br/>当前值:{c} ({d}%)",

        },

        calculable : false,

        series : [

            {

                name:'失败原因',

                type:'pie',

                radius : '36.7%',

                center: ['50%', '55%'],

                itemStyle : {

                    normal : {

                        label : {

                            show : true

                        },

                        labelLine : {

                            show : true

                        }

                    },

                },

                data:data.data,

            }

        ]

    };

    myChart.setOption(option);

    $("#"+id).css({"border":"1px solid #ccc"});

    imgURL = myChart.getDataURL();

    });

    return imgURL;

}

这是我的代码，有时候图画出来，可是返回的imgURL却是null

@林峰

Answer 4

echarts在默认隐藏的div中显示空白，有时候图表会放在多个标签页(tab)里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败（不显示图表、图表的高度为0或者宽度为0），解决办法是在echarts渲染之前先设置div的宽高，然后再调用echarts的setOption配置项和数据显示图表。

具体的实现代码可以参照这篇文章：
echarts 不显示,tab切换重新渲染Echarts