Echarts container/size 조절

Initialization

---

HTML에서 상위 컨테이너 정의

 

일반적으로 <div> 노드를 정의하고 CSS를 사용하여 
너비와 높이를 변경해야 합니다. 
초기화하는 동안 차트를 노드로 가져옵니다. 
opts.width 또는 opts.height를 선언하지 않으면 
차트 크기가 기본적으로 노드 크기로 설정됩니다.

 

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

 

echarts.init를 호출하기 전에 컨테이너에 너비와 높이가 이미 있는지 확인해야 합니다.

 

 

 

 

 

차트 크기 지정

 

컨테이너의 높이와 너비가 존재하지 않거나 차트 크기가 
컨테이너와 같지 않은 경우 처음부터 크기를 초기화할 수 있습니다.

 

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

 

 

 

 

 

Reactive of the Container Size

---

컨테이너 크기로 차트 크기 변경

 

컨테이너의 크기가 변경될 때 차트 크기도 적절하게 변경하고자 합니다.

예를 들어 컨테이너의 높이는 400px이고 너비는 100% 사이트 너비입니다. 
차트 너비를 100%로 안정적으로 유지하면서 사이트 너비를 변경하려는 경우 
다음 방법을 시도하십시오.

사이트의 window.onresize를 수신하여 브라우저 크기가 조정되는 이벤트를 캐치할 수 있습니다. 
그런 다음 echartsInstance.resize를 사용하여 차트 크기를 조정합니다.

 

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.onresize = function() {
    myChart.resize();
  };
</script>

 

 

 

특정 차트 크기 명시

 

매개변수 없이 resize()를 호출하는 것을 제외하고 높이와 너비를 명시하여 
컨테이너 크기와 다른 차트 크기를 구현할 수 있습니다.

 

myChart.resize({
  width: 800,
  height: 400
});

⭐Tip myCharts.resize(800, 400) 이런 형식은 존재하지 않으니 주의해서 사용해 주세요!

 

 

 

컨테이너 노드 dispose/rebuild

 

여러 Bookmark 페이지가 있고 각 페이지에 일부 차트가 포함되어 있다고 가정합니다. 
이 경우 한 페이지를 선택하면 다른 페이지의 콘텐츠가 DOM에서 제거됩니다. 
이 페이지를 다시 선택하면 사용자가 차트를 찾을 수 없습니다.

기본적으로 차트의 컨테이너 노드가 제거되었기 때문입니다. 
나중에 노드를 다시 추가하더라도 그래프가 위치한 노드는 더 이상 존재하지 않습니다.

올바른 방법은 echartsInstance.dispose를 호출하여 컨테이너가 삭제된 후 
인스턴스를 삭제하고 echarts.init를 호출하여 컨테이너가 다시 추가된 후 초기화하는 것입니다.

 

⭐Tip echartsInstance.dispose를 호출하여 리소스를 해제하는 동시에 메모리 누수를 방지하기 위해 노드를 삭제합니다.

 

 

 

 

 

 

resize()

---

window.onload = function () {
            window.myChart = echarts.init(document.getElementById('main'));

            //graph resize
            $(window).on('resize', resize);
            function resize(){
                setTimeout(function(){
                    window.myChart.resize();
                }, 100);
            }
        }

 

저는 이상하게 위의 방법들이 잘 안 먹혀서

baidu에서 검색해서 찾아낸 코드로 사용했어요.