Including ECharts
echarts.js를 저장한 디렉토리에 다음 내용으로 새 index.html 파일을 만듭니다.
CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Include the ECharts file you just downloaded -->
<script src="echarts.js"></script>
</head>
</html>
GitHub
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../dist/echarts.js"></script>
</head>
</html>
<script> 태그의 src 속성에 본인이 저장한 echarts.js의 상대 경로를 적어줍니다.
Plotting a Simple Chart
그리기 전에 높이와 너비가 정의된 EChart용 DOM 컨테이너를 준비해야 합니다.
<div> 태그로 이루어져 있으며 <body> 태그 안에 작성합니다.
<body>
<!-- Prepare a DOM with a defined width and height for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
| 🌟Tip 여기서 완전 중요한 팁!! ECharts는 무조건 height, width를 지정해 줘야 합니다. 아니 적어도 height는 꼭 절대값으로 지정하고 width는 %로도 작성이 됩니다. 이것 때문에 resize할 때 애를 먹었는데요. 이건 다음에 다시 포스팅하도록 하겠습니다. |
그런 다음 echarts.init 메소드로 echarts 인스턴스를 초기화하고
setOption 메소드로 echarts 인스턴스를 설정하여
간단한 막대 차트를 생성할 수 있습니다.
다음은 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- Include the ECharts file you just downloaded -->
<script src="echarts.js"></script>
</head>
<body>
<!-- Prepare a DOM with a defined width and height for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data for the chart
var option = {
title: {
text: 'ECharts Getting Started Example'
},
tooltip: {},
legend: {
data: ['sales']
},
xAxis: {
data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
},
yAxis: {},
series: [
{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
</body>
</html>
그냥 차트를 삽입하고 싶으면 이 구조를 그대로 갖다 놓고
옵션만 변경해서 사용하시면 편합니다.
id가 main인 <div> 태그로 그래프가 그려질 캔버스를 만든다.
js 부분에서 myChart에 초기화된 echart 인스턴스를 만들어
option을 설정하고 setOption으로 차트를 그려낸다.
뭐 요정도로 이해하시면 될 것 같습니다.
Examples
수많은 Examples 중에 마음에 드는 그래프를 하나 골라 연습해 봅니다.
위의 코드로 index.html을 작성하고 option만 변경해 주면 됩니다.
그래프를 클릭하면 이런 화면이 나오고 바로 option edit이 가능합니다.
잘 모를 때는 이것저것 눌러보고 고쳐보고 하면서 배우는 거죠.
Full code에는 JS에 삽입해야될 전체 코드가 나오지만 어차피 우리는
위의 전체 구조 소스로 사용할 거니까 넘어갑니다.
option preview에는 이 그래프에 사용된 option들이 쭉 나오고
클릭해 보면 자세한 설명을 볼 수 있습니다.
너무나 다양한 option들이 있기 때문에 이건 직접 써보면서 익히시길 바랍니다.
| ⭐Tip Full Code만 복사해서 그래프가 안 그려진다고 하시면 안됩니다!! height, width가 설정된 <div> 태그가 꼭!! 필요합니다!! 제가 그랬거든요.... 왜 안나오지 하면서....ㅎ |
'Just Do It > Echarts' 카테고리의 다른 글
| Echarts.js Theme Builder (0) | 2022.02.17 |
|---|---|
| Echarts DataZoom (0) | 2022.02.09 |
| Echarts container/size 조절 (0) | 2022.02.08 |
| ECharts.js 소개 및 설치 (1) | 2022.02.04 |
