[echarts] 무료 자바스크립트 차트 Echarts 편하게 사용하기

 

 

이전 포스팅에서 예쁜 자바스크립트 차트로 amcharts를 소개했었는데요!

https://domdom.tistory.com/2?category=970264 

[javascript Chart] 예쁜 자바스크립트 차트 (javascript chart) 사이트 amcharts!

 

 

amcharts를 사용하면서 불편했던 점은,

무료로 사용할 경우 amcharts의 로고가 그래프마다 계속 생긴다는 점이에요.

 

이번에는 무료로, 로고없이, 다양하게 커스텀이 가능한 echarts를 소개해드리려고 합니다!

 

https://echarts.apache.org/en/index.html

Apache ECharts

 

echarts 홈페이지로 들어가면

상단 메뉴에 Docs와 Examples이 있어요.

Docs로 들어가면 차트를 어떻게 사용하는지에 대한 설명서가 적혀있고,

Examples로 들어가면 차트 예시 코드가 적혀있어요.

 

 

 

Examples 메뉴로 들어가봤어요.

차트가 종류별로 정말정말 많죠?! 스크롤이 끊임없이 있어요 ..!

 

Brush Select on Column Chart 라는 차트를 눌러볼게요!

 

 

 

 

이렇게 왼쪽에 사용설명코드가 있고,

오른쪽에는 차트 시각화가 보여요.

왼쪽에 있는 코드를 수정하면 바로바로 오른쪽 차트에서 수정된 결과를 확인할 수 있어요.

 

 

참고로 이 examples에 있는 코드는 options에 대한 코드만 나와있는데요,

echarts는 option만 바꿔끼워주면 원하는 차트를 그려낼 수 있기에 정말정말 편리합니다.

우측 상단에 있는 Download 버튼을 누르면 차트를 그려놓은 html파일을 다운로드 받을 수 있어요.

 

그리고, amcharts 에서는 기본적으로 반응형이 내재되어있어서,

브라우저창 크기를 키우거나 줄이면 차트가 자동으로 브라우저창 크기에 맞춰서 커지고, 줄어들었었는데,

echarts는 반응형을 적용시켜주어야 합니다!

 

아래는 제가 echarts를 편리하게 사용하기 위해 작성해놓은 자바스크립트 코드에요.

반응형도 되도록 해놓았어요.

 

function makeGraph(divId, option){
    var dom = document.getElementById(divId);
    var myChart = echarts.init(dom);
    myChart.setOption(option);
    $(function () {
        $(window).on('resize', resize);
        $(".menu-toggle").on('click', resize);
        function resize() {
            setTimeout(function() {
                myChart.resize();
            }, 200);
        }
    });
}

 

makeGraph 파라미터로 차트를 넣을 div의 id와, echarts의 차트 option을 넣으면 된답니다.

차트마다의 옵션 딕셔너리는 포맷은 똑같고, 데이터만 갈아끼워주면 되기 때문에,

차트마다 옵션도 함수로 만들어놓고, 데이터를 파라미터로 받아오면 정말 간편해요.

 

차트를 여러개 만들어야 할때,

옵션을 계속 여러개 만들어서 사용하면 코드도 길어지고 번잡스럽거든요.

 

데이터를 파라미터로 넣으면 차트 옵션을 리턴해주는 함수를 아래와 같이 만들어주면,

아까 제가 만들어놓은 makeGraph 함수와 함께 사용이 가능하죠!

 

function getOption(dataName, dataList){
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
        },
        series: [
            {
                name: dataName,
                type: 'pie',
                radius: '50%',
                data: dataList
            }
        ]
    };
    return option;
}

 

<div id="chartDiv" style="height: 500px; width: 500px;"></div>



makeGraph("chartDiv", getOption("가장 좋아하는 과일",  [
                {value: 1048, name: '바나나'},
                {value: 735, name: '사과'},
                {value: 580, name: '딸기'} ]));

 

저는 이런식으로 사용하고 있답니다!

 

끝입니다!