솔솔

Echats 사용법 본문

나의보물들/JavaScript

Echats 사용법

솔솔하네 2022. 10. 20. 10:59
반응형

 

1. https://github.com/apache/echarts

 

GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts is a powerful, interactive charting and data visualization library for browser - GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization li...

github.com

2. [dist] - [echarts.js] 코드 다운로드 

 

3. 내 프로젝트 js폴더에 파일 echarts.js 만든 후 다운로드한 코드 붙여넣기

 

4. html에 js파일 경로 지정해주기

<script type="text/javascript" src="js/echarts.js"></script>

 

5. html에 아래 코드 추가하기

<div id="main" style="width: 1200px; height:800px;"></div>

 

6. js폴더에 원하는 이름으로 js파일 만든 후 'https://echarts.apache.org/examples/en/index.html'에서 원하는 차트 디자인 코드 들고와서 붙여 넣기 

 

 


❗만약에 위와같이 적용했는데 echarts.js파일이ㅣ 없다고하면서 안되면   echarts.js파일에서 맨아래 줄에 있는 이 코드 삭제하기