[연습] Angular6.x가 echarts 차트 튜토리얼을 소개합니다

작은 쓰레기 같은 놈들 · 게시됨 2019. 4. 24. 오후 3:27:55

머리말

Angular2+는 TypeScript로 개발되기 때문에, echarts를 사용하려면 Angular 플러그인 NGX-echarts를 설치해야 합니다. 렌더링은 다음과 같습니다:

GitHub 주소:하이퍼링크 로그인이 보입니다.
echarts 관련 지식 및 API:하이퍼링크 로그인이 보입니다.

설치

NPM 설치 명령어:

npm install module_name -S 즉, npm install module_name --save write-dependenciesnpm install module_name-D --d, 즉 npm install module_name --save-dev가 devDependencies 쓰기

로그인이 보이네요.

ngx-echarts 모듈을 도입했습니다

app.modules.ts 루트 모듈에 NgxEchartsModule을 도입하세요

로그인이 보이네요.

제 페이지가 서브컴포넌트이기 때문에 서브모듈로 가져와야 합니다，app.modules.ts 상위 모듈에서 가져올 필요는 없습니다, 코드는 다음과 같습니다:

서브모듈은 부모 모듈에서 컴포넌트를 가져올 수 없으니, 헤더 컴포넌트를 공유하고 싶다면 사용하려는 각 모듈에 헤더 컴포넌트를 가져오세요.
공유 모듈은 자식 모듈에서 내보내는 상위 모듈이기도 하며, 공유해야 할 것을 모듈에 추가한 후 다른 모듈로 가져오는 방식입니다

참고 링크:하이퍼링크 로그인이 보입니다.

로그인이 보이네요.

컴포넌트 HTML 페이지 도입itsvse.component.html:

로그인이 보이네요.

CSS 스타일시트 세트 높이:

로그인이 보이네요.

itsvse.component.ts 코드 (아래 TS 코드 모두 허용됨)

방법 1:

로그인이 보이네요.

방법 2:

로그인이 보이네요.

마지막으로 프로젝트를 실행하면 echarts 차트 효과를 볼 수 있습니다.

작은 쓰레기 같은 놈들 · 게시됨 2019. 5. 10. 오전 10:48:10

https://xieziyu.github.io/ngx-echarts/#/home

작은 쓰레기 같은 놈들 · 게시됨 2019. 5. 10. 오후 4:25:17

https://www.echartsjs.com/gallery/vendors/echarts/echarts.min.js
https://www.echartsjs.com/gallery/vendors/echarts/map/js/china.js
https://www.echartsjs.com/galler ... tension/bmap.min.js

[각] [연습] Angular6.x가 echarts 차트 튜토리얼을 소개합니다

관련 게시물

본 섹션