[echarts] 차트 여러 개 그리기

한 화면에 차트를 6개 그려야하는 상황이었다.

원래는 2개정도 밖에 안되어서 전체 코드를 두번 작성하였는데,

6개가 되니까 코드가 너무 길어져서 메서드를 만들어서 그리려고 한다.

 

차트 그리는 코드를 담은 메서드

function makeChart(chartId, option){
   		var dom = document.getElementById(chartId);
   	    var myChart = echarts.init(dom);
   	    var app = {};
   	    
	   	 if (option && typeof option === 'object') {
	         myChart.setOption(option);
	       }
	   	 
	   	$(window).resize(function() {
	   		myChart.resize();
		});
		
		$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
			myChart.resize();
		});
   	}

 

차트 옵션을 개별 설정해주는 메서드

function setOption(mmdata,totdata,mmBarWidth,totBarWidth){
    	var option;
	   		
	   	option = {
	   			tooltip: {
	   			    trigger: 'axis'
	   			    ,axisPointer: {  type: 'shadow' }
	   			    }
	   			 ,grid: {
	   				 top: "25%"
	   				,bottom: "25%"
	   				,left: "10%"
	   				,right: "2%"
	   			  }
	   			 ,xAxis: {
	   			        type: 'category',
	   			        data: ['당월', '누계']
	   			      }
	   		     ,yAxis: {
	   		       type: 'value',
	   		   		min: 0,
	   		     	max: 5,
	   		     	interval: 5,
	   		     },
	   		     series: [
	   			        {
	   			          data: mmdata,
	   			          type: 'bar',
	   			          barWidth: mmBarWidth
	   			        },
	   			        {
	   			          data: totdata,
	   			          type: 'bar',
	   			          barWidth: totBarWidth
	   			        }
	   			      ]
	   			};
	   	return option;
    }

 

차트 그리는 실행 코드

<script type="text/javascript">
  $(document).ready(function() {	
		makeChart('slsChart',setOption([2, 4],[4, 2],'25%','25%'));
   });

 

전체 코드를 작성하진 않았고, 이해를 위해 부분 코드를 올려놓는다! ^_^