ECharts 최소 최대값 설정!

ECharts의 최대 최소값 설정!

Echart를 사용해서 차트를 그리다 보면 최소 최대값이 자동으로 조절되는 것을 확인할 수 있습니다.
하지만 자동으로 설정하는 것보다 원하는 값으로 변경할 수 있는 방법을 알려 드릴려고 합니다.

Echarts를 잘 모르시는 분들은 ECharts를 통해 5분안에 차트를 만들자!을 확인한 후 보시면 이해가 더 편할겁니다.

ECharts의 자동 최대 최소값 설정

자동으로 설정하면 거의 최소 값은 0에 고정되어 있습니다.
만약 값이 전부 100으로 들어온다면 아래와 같이 그려지게 됩니다.

//1번째 차트를 그릴 영역입니다.
<div id="chart1" style="width:600px; height:400px;"></div>

<script type="text/javascript">
	// DOM을 준비하고 echart 객체를 만듭니다.
    var myChart1 = echarts.init(document.getElementById('chart1'));

    var option1 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
        	//date 값이 전부 똑같습니다.
            data: [100, 100, 100, 100, 100, 100, 100],
            type: 'line'
        }]
    };

	// 위에서 설정한 속성을 차트에 반영합니다.
    myChart1.setOption(option1);
</script>

값이 전부 100으로 설정되어 있어서 잘 보이지도 않네요. 만약 선이 검은색 이었다면 아예 숨은그림 찾기 였을것 같아요 ㅋㅋ

원하는 최대 최소 값으로 변경

하지만 제가 차트를 그린다면 가운데에 차트가 그려졌으면 합니다. 그럴경우 min, max 의 값을 직접 설정할 수 있습니다.
바로 yAxis 안에 min, max설정을 변경하는 것입니다. 예제를 통해 확인 하시죠.

//2번째 차트를 그릴 영역입니다.
<div id="chart2" style="width:600px; height:400px;"></div>

<script type="text/javascript">
	// DOM을 준비하고 echart 객체를 만듭니다.
    var myChart2 = echarts.init(document.getElementById('chart2'));

    var option2 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            min: 80,
            max: 120
            //위의 min, max를 설정한 모습을 확인할 수 있습니다.
        },
        series: [{
            data: [100, 100, 100, 100, 100, 100, 100],
            type: 'line'
        }]
    };

	// 위에서 설정한 속성을 차트에 반영합니다.
    myChart2.setOption(option2);
</script>

이렇게 가운대로 예쁘게 그려진 것을 확인할 수 있습니다.

동적으로 최대 최소값 변경하기

하지만 위의 예시 처럼 고정값으로 설정할 경우 값이 계속 변하고 값이 최대 최소 값보다 적거나 클경우 아예 화면 밖에 그려져 보이지 않을 수도 있고, 값이 계속 100으로만 들어온다는 보장도 없을때는 어떻게 해야할까요?

echarts의 API를 확인하면 “dataMin, dataMax를 사용할 수 있고, 설정되지 않았을때는 자동으로 설정한다” 정도로 해석되는대요.(그림은 클릭하면 크게 볼 수 있습니다.)
저는 위아래 어느정도 떨어진 값을 설정해보도록 하겠습니다.

//3번째 차트를 그릴 영역입니다.
<div id="chart3" style="width:600px; height:400px;"></div>

<script type="text/javascript">
	// DOM을 준비하고 echart 객체를 만듭니다.
    var myChart3 = echarts.init(document.getElementById('chart3'));

	var option3 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            //아래와 같이 min,max에서 function을 사용할 수 있습니다.
            min: function(item){
                var diff = item.max-item.min;
                if(diff == 0) {diff = 1}
                return (item.min - ((diff) * 0.2)).toFixed(2);
            },
            max: function(item){
                var diff = item.max-item.min;
                if(diff == 0) {diff = 1}
                return (item.max + ((diff) * 0.2)).toFixed(2);
            },
        },
        series: [{
            data: [1820, 1932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
	};

	// 위에서 설정한 속성을 차트에 반영합니다.
    myChart3.setOption(option3);
</script>

위와 같이 설정한다면 최소값과 최대값의 차이에 0.2정도를 위 아래 여백으로 설정할 수 있게 되었습니다.
소수점이 정확하게 안 떨어질 경우를 대비해서 toFixed(2)를 사용해 소수점 정리를 하였습니다.
if(diff == 0) {diff = 1}는 값이 전부 같을 경우 0값이 들어가기 때문에 조정하였습니다.

모두 원하는 차트 그리셨기를 바랍니다!

Reference

• https://echarts.apache.org/

Related Posts

• ECharts를 통해 5분안에 차트를 만들자!
• ECharts를 통해 간단한 Heatmap 만들기!