Incubator-echarts: Uncaught TypeError: Cannot read property 'modLayer' of null

[hello2t]

function reloadEcharts(obj, json) {
    var chart = echarts.init(obj);
    chart.setOption(json);
    window.addEventListener("resize", function() {
        chart && chart.resize();
    });
}

开启chrome 调试台时候，会触发echarts resize 事件，会引起报错，望解惑...

[gracelinmumu]

同求原因，我在重绘时也遇到这个问题了

[hushicai]

看你这情况，似乎是在resize回调函数执行之前chart已经被释放掉了。

[hello2t]

重现步骤：打开控制台，绘制图表，拉扯控制台无报错，保持页面不变，ajax请求返回后执行reloadEcharts, 拉扯控制台报错。应该是前一个图表监控事件没有被释放吧？

[thanatos11]

I have the same error. Is there any fix?

This happens when I call back a new chart from Ajax, then the resize will crash with the same error. Although I am updating the chart and not re-drawing.

[thanatos11]

I have tried to detect the chart before updating and release the variables, then do a re-init. But the same error. I have also tried to reload the table on resize with a timeout. But the performance is bad.

[thanatos11]

But the only solution, with a big minus on performance is to re-draw the tables on resize with timeout. Very bad :-1:

[thanatos11]

The problem is based on the new ajax chart, will delete the old one, the system tries to resize the old one, but that no longer exists. One solution is to bind the function to resize and unbind after the new ajax and bind again. But this is also a problem, because the binding is done on unanimous function. So this implementation helped me:

I. define a new modules.js inside the "echarts/module/modules.js"

II. inside the modules.js define a new require dict holding all your charts:

define(function(){
    var charts = {
        'Chart1':false,
        'Chart2': false,
        'Chart3' : false
    };
    $(window).resize(function(){
         if ( charts['Chart1'] ) {
            charts['Chart1'].resize();
        }
         if ( charts['Chart2'] ) {
            charts['Chart2'].resize();
        }
         if ( charts['Chart3'] ) {
            charts['Chart3'].resize();
        }
    });
    return function(k){ charts[k["name"]] = k["content"] }
});

III. In your chart function just call the new module with the require.js:

require(
        [   'echarts',
            'echarts/chart/line',
            'echarts/module/modules'
        ], function (ec, line, modules) {
            var Chart1 = ec.init(document.getElementById('chart_1'));
            modules({ "name" : "Chart1", "content" : Chart1});
            var chart_1_option = {.....}
....... etc

[wzhscript]

我也遇到了这个问题。原因应该是：window.onresize上绑定的resize方法所对应的chart对象已经不存在了。
所以在调用echarts.init后也要更新window.onresize对应的resize方法。(如果是用jquery.on绑定resize函数，相应也需要用jquery.off去解除绑定)

var myChart = echarts.init(someDOMElement);
window.onresize = myChart.resize;

// or

var myChart = echarts.init(this.refs.container.getDOMNode());
global._preResize && $(window).off('resize', global._preResize);
global._preResize = myChart.resize;
$(window).on('resize', myChart.resize);

[zhangbobell]

@wzhscript 是的，我也碰到这个问题了，多次初始化需要移除之前绑定的事件处理程序。

[Larryljx]

求助，怎么解决的，window.onsize 试过了还是不行

[treasure520]

我在把一個echarts圖形放進一個modal窗體時也遇到了同樣的錯誤。
在載入頁面後的第一次顯示modal窗體時，echarts圖形可以正常顯示；
但在關閉modal窗體後再次打開modal窗體時，圖形就不正常了，
同樣報了Cannot read property 'modlayer' of null這個錯。
後來我試著把echarts的初始化代碼放進modal窗體的'shown.bs.modal'事件裡，
結果就可以正常運作了。

$.ajax({
　　.....
　　.....
　　success: function(data) {
　　　　$('#modal').on('show.bs.modal', function() {
　　　　　　let myChart = echarts.init(document.getElementById('chart_idv');
　　　　　　let option = {
　　　　　　　　.....
　　　　　　　　.....
　　　　　　};
　　　　　　myChart.resize();
　　　　　　myChart.setOption(option);
　　　　});
　　　　$('#modal').modal();
　　},
});