ProgrammingEcharts

ECharts를 통해 5분안에 차트를 만들자!

Echarts, echart, echart 한글, 이차트

ECharts를 통해 5분안에 차트를 만들자!

Echarts 에 있는 튜토리얼을 한글로 번역하였습니다.

ECharts 다운로드

우선, 아래의 방법 중 하나를 선택하여 다운로드 받습니다:

  • official download page, 공식 홈페이지에서 다운로드 받습니다. 만약 모든 패키지를 다운받고 싶다면 the full minified version에 들어가 확인하세요.

  • 최신 파일은 GitHub 에 올려져 있습니다. 접속한 후 dist경로 아래에 압축되어 있습니다.

  • npm을 사용할 수 있습니다: npm install echarts –save. Using ECharts with webpack

ECharts 소개

ECharts 3는 더 이상 AMD을 사용하지 않습니다. 대신, ECharts는 전통적인 <script> tag를 사용합니다. html 에 맨 위에 있는 head 태그안에 아래와 같이 적어주세요:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
   		<!-- including ECharts file -->
    	<script src="echarts.min.js"></script>
    </head>
</html>

간단한 차트 그리기

차트를 그리기 전에, 우리는 DOM container를 준비해야합니다. 그리고 꼭 넓이와 높이를 지정해 주세요. 지정하지 않는다면 너무 작게 그려져 화면에 차트가 보이지 않을 수 있습니다.

1
2
3
4
<body>
<!-- 높이와 너비가 지정된 Dom 을 생성합니다 -->
	<div id="main" style="width:600px; height:400px;"></div>
</body>

ECharts 객체를 echarts.init 을 사용해 준비합니다. setOption을 통해 간단한 bar 차트를 만듭시다. 아래에 전체 코드가 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 다운받은 echarts 파일 -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 높이와 너비가 지정된 Dom 을 생성합니다 -->
<div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // DOM을 준비하고 echart 객체를 만듭니다.
        var myChart = echarts.init(document.getElementById('main'));

        // 차트 속성과 데이터를 지정합니다.
        var option = {
            title: {
            	text: 'ECharts entry example'
            },
            tooltip: {},
            legend: {
            	data:['Sales']
            },
            xAxis: {
            	data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

자 처음으로 완성된 차트 입니다! 차트위에 마우스를 올리면 툴팁이 생성되는걸 확인할 수 있습니다!
더 많은 예제는 ECharts Gallery에서 확인할 수 있습니다!

Reference

Share