16

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

SG_
  • 1,316
  • 14
  • 26
Lolo
  • 527
  • 2
  • 8
  • 26

4 Answers4

38
var plot = echarts.init(yourDom);
plot.setOption({...});
window.onresize = function() {
  plot.resize();
};
maralla
  • 2,481
  • 2
  • 12
  • 10
  • @GeorgeP indeed that's a perfect answer but it's failing when i use same component but instances are diffrent ? – Akshay Mar 23 '20 at 12:46
  • are you adding it for every instance? `yourDom` should be for each of your charts dom elements. – GeorgeP Mar 23 '20 at 14:11
10
        window.onresize = function() {
            $(".ga-charts").each(function(){
                var id = $(this).attr('_echarts_instance_');
                window.echarts.getInstanceById(id).resize();
            });
        };
source box
  • 101
  • 1
  • 2
  • 3
    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. – Wtower Jul 04 '15 at 18:06
  • You can [edit] your answer to include such a description. – Artjom B. Jul 05 '15 at 01:13
  • 3
    Excellent solution! There is no description needed, all you have to do is set a class for your charts eg: "ga-charts". – Mecanik Jul 31 '17 at 11:19
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) `
Abhi
  • 4,123
  • 6
  • 45
  • 77
TristaLee
  • 39
  • 3
  • While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 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. – J. Chomel Mar 17 '17 at 07:07
  • @J.Chomel thx for your suggestion. i will pay attention to it. – TristaLee Mar 18 '17 at 13:02
  • You can still edit your answer if you think it could be helpful to anyone – J. Chomel Mar 19 '17 at 08:24
1

With jQuery:

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