[WEB] ECharts 트리맵 차트 적용하기 Treemap

계속되는 이마트!! 아니, 이차트!!!!! (내가 적고도 재미없는데 어쩔 ;;)

 

이번에는 트리맵입니다.

지난번까지는 혼합차트를 만졌는데요.

이번에는 treemap 으로 넘어왔습니다 ㅋ

 

우선... 종류가 있는데요.

저는 단순한걸로 갑니다.

 

 

 

깔끔 그자체!!! Basic Treemap 을 선택합니다.

예제를 보고 일단 만들어 봅니다.

 

 

 

흠.... series 안에 보니까.. children 으로 새끼를 쳐 나가네요. 하긴.. 트리맵이니 같은 계열도 있어야 할 테고..

그런데 일단 아래에 검은 배경의 글자들이 신경쓰입니다.

뭘까요??

 

 

 

클릭을 해 보시면.. ECharts Treemap 차트 구성원들의 depth 를 알려주는 네비게이션같은 녀석입니다.

어느 루트의 어떤걸 클릭해서 보고있다.. 같은 상세를 알려주는거죠.

저는 이렇게 새끼를 많이 쳐서 깊이 들어갈 생각도 없고,

이런기능은 필요 없으니 한번 지워보겠습니다.

 

당연히 검색해도 나오질 않네요. 제가 제대로 검색을 못했을지도 모르지만...

어떻게 검색을 해야할지 모르겠더라구요 ㅋㅋㅋㅋ ECharts 트리맵 검은거 지우기. 뭐 이런식으로밖에는 ;;;

 

 

 

결국! 얼마전에 부트스트랩 템플릿 수정하다가 보였던 단어가 있어서 그걸 한번 해 봤습니다.

진짜 눈에 띄어서 그냥 생각없이 만져봤는데... 이게 맞네요 ㅋㅋㅋㅋㅋㅋ

야호~ 시간 오래 안걸렸당 ㅋㅋㅋㅋㅋ

 

breadcrumb: { show: false }

 

요렇게 추가해주시면!

 

 

 

아래에 표시되던 검둥이가 없어집니다.

세상 깔끔!

그렇다고해서 클릭했을때 아무런 동작이 안되는건 아닙니다.

ECharts 트리맵 차트 사용하실때에 일단 이렇게 해 두시고, 이후로는 옵션으로 맞춰나가면 되실겁니다.

가장 기본적으로 적용하는것만 해 봤는데요...

저는 해야 할 것이.. 다른색으로 하는게 아니라 같은계열의 색에서 명도,채도만 다르게

표시하는걸 해야하는지라... 담번에는 그걸 해 보겠습니다.

 

오늘은 간단하게 echart 트리맵 차트 적용까지만!!!! 끗!!!