ECharts: How to use the resize event of the window?

Question

Im trying the Echarts library for my graphs. I'd like to resize the plots when the window's resize trigger is fired but I can't find the way to do it.

Thanx for your help

Solution 1

var plot = echarts.init(yourDom);
plot.setOption({...});
window.onresize = function() {
  plot.resize();
};

Solution 2

        window.onresize = function() {
            $(".ga-charts").each(function(){
                var id = $(this).attr('_echarts_instance_');
                window.echarts.getInstanceById(id).resize();
            });
        };

Solution 3

var allCharts = $('.charts');

setTimeout(function(){
  for(var i=0;i<allCharts.length;i++){
    var $item = $(allCharts[i]);
    echarts.getInstanceById($item.attr('_echarts_instance_')).resize();
  }
},100) `

Solution 4

With jQuery:

    // resize all charts
    $(window).on('resize', function(){
        $("[_echarts_instance_]").each(function(){
            window.echarts.getInstanceById($(this).attr('_echarts_instance_')).resize()
        });
    });

View more solutions

Comments

[Wtower]

Hi and welcome to Stack Overflow! Although your answer may solve the problem, I would recommend you to improve its quality by including the essential parts on why it is helpful.

[Artjom B.]

You can edit your answer to include such a description.

[J. Chomel]

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[Admin]

@J.Chomel thx for your suggestion. i will pay attention to it.

[J. Chomel]

You can still edit your answer if you think it could be helpful to anyone

[Mecanik]

Excellent solution! There is no description needed, all you have to do is set a class for your charts eg: "ga-charts".

[Akshay]

@GeorgeP indeed that's a perfect answer but it's failing when i use same component but instances are diffrent ?

[GeorgeP]

are you adding it for every instance? yourDom should be for each of your charts dom elements.