[WEB] Apache ECharts 트리맵 차트 - 같은계열 색상 설정, 표시 이름 줄바꿈 Treemap

지난번에 Apache ECharts 트리맵 적용을 해 봤습니다.

간단하게 끝나서 다행이었는데요.

 

 

2022.09.26 - [기술집/WEB관련] - [WEB] ECharts 트리맵 차트 적용하기 Treemap

 

 

이번에는 제가 원하는대로 커스터마이징을 해 볼까합니다.

그렇게 대단한건 아니구요..

제가 하려는게 여러가지 색상으로 알록달록한게 아니라

같은계열 색상으로 채도의 차이를 줘서 연한색부터 진한색..

이렇게 나누고 싶습니다.

 

일단, children 안에 임의로 값을 넣어줍니다.

 

 

 

흠냐... 같은색으로만 출력이 됩니다.

이런걸 원한게 아니란거죠 ㅎㅎㅎ

 

 

 

일단은... 제일 첫 단계인 데이터 바로 아래의 1depth.

name과 value를 지우고 바로 childern 부터 시작하게 해 봅니다.

뭔가 변화가 있을지...

 

 

 

아무런 변화가 없습니다. 만약 breadcrumb 가 있는경우라면 depth 표시를 할때 데이터가 빠지는부분이 있겠지만

제가 하려는 이차트 트리맵 같은계열 색상 설정 하려는데 있어서는 아무런 불편함이 없습니다. 우훗. 그럼 지우는걸로 ㅋ

그럼 도대체 어떻게 해야하는걸까요?

옵션을 찾아봐도 뭐가뭔지 모르겠고....

그렇게 고민하던중에 유.레.카. !!!!!!!!!!!!!!!!!!!!!!!!!

 

 

 

여기 샘플들중에 다른 Apache ECharts Treemap 종류를 보시면.. 여러가지 효과를 주면서 같은계열 색상 설정이

되어있는 샘플들이 보입니다.

거러췌!!!!!!!

바로 뜯어보겠습니다.

 

 

 

포인트는 바로 이 부분. levels 라는 옵션입니다.

일단 제가 캡쳐해 둔 부분은 전부 복사해서 붙여넣기로 결과물을 먼저 확인해보겠습니다.

46~61 라인을 복사해 주시구요.

 

728x90

 

 

작업중인 곳에다가 붙여줍니다.

주의하실점은.. levels 끝에 ] 를 입력하셔서 잘 닫아주시고, 콤마도 찍어주셔야합니다.

그리고 borderWidth / gapWidth 얘들은 지우셔도 됩니다. 괜히 선만 두꺼워지는거라서..

colorSaturation 안에 숫자는 적당히 조절을 해 주셔도 됩니다. 안건드셔도 되구요. 

여기 수치에 대해서는 조금 있다가 한번 만져보겠습니다.

그럼.. 어디 확인 해 볼까요?

 

 

 

WOW!!!!! 바로 이거야!!! ㅋ

아주 멋지게 바뀌어 있습니다. EChart 트리맵 차트 같은계열 색상 설정 제대로 되었죠??

우왕... 뭔가 감동 ㅠㅠ

그리고 하는김에...어떤 설정까지가 이 색상 범위를 결정하는건지 한번 지워봤습니다.

한줄 한줄...

그리고 남은건 이거 한줄뿐입니다 ㅋ

 

 

 

levels 안에 colorSaturation 설정만 해 줘도 아무런 문제없었습니다.

 

 

 

이렇게 말이죠. 

colorSaturation 옵션 안에는 색상 범위를 설정하는건데, 수치는 0~1 까지 입니다.

수치가 낮을수록 진한색... 높을수록 연한색이 됩니다.

이정도만 알면 Apache ECharts 트리맵 같은계열 색상 설정하는거 문제없겠죠?

 

그리고 순서는.. 수치가 낮은게 먼저, 높은게 나중입니다.

무슨말이냐면...

 

colorSaturation [ (수치가 낮을수록 세팅되는 색) , (수치가 높을수록 세팅되는 색) ] 

 

이런건데요. 0에 가까울수록 색이 진해진다고했죠???

그럼 앞쪽에 낮은숫자를 넣으면 데이터가 낮을수록 색이 진해지고, 높을수록 색이 연해진다는겁니다.

반대로!!!! 앞쪽에 높은숫자를 넣으면 데이터가 낮을수록 색이 연해지고, 높을수록 색이 진해진다는 말이죠.

 

다음 두개의 결과물을 보시면 알기 쉬울겁니다.

 

 

colorSaturation[ 0.2 , 0.5 ] 결과물

colorSaturation : [ 0.8 , 1 ] 결과물

 

보시는것처럼... 앞쪽에 1을 넣으면 그냥 하얀색입니다.

뒷쪽의 숫자가 데이터 수치가 높은 값의 채도를 말하는걸 알 수 있습니다.

이정도면 명도,채도 같이써야되는게 아닌가...싶을정도로 보이는데 잘 모르겠습니다 ㅋㅋㅋ

그런걸 잘 알정도가 아니라서요 ;;;

그럼 반대로. 데이터 수치가 높을수록 색을 진하게 하고싶다면??

 

간단합니다. 앞쪽에 높은숫자를 넣고, 뒷쪽에 낮은숫자를 넣으면 됩니다.

 

 

colorSaturation:[ 0.5, 0.1 ] 결과물

 

간단하죠? 0.1은 저렇게나 색상이 짙어집니다.

이정도라면.. echart 트리맵 같은계열 색상 변경 마음대로 하실 수 있겠죠???

그럼 실제 화면에 적용을 해 보겠습니다.

 

 

 

국가 이름이 잘 나옵니다.

뽑아 낸 수치별로 잘 나와있는데요. 1등은 역시나 중국... 짱개니 더럽니 뭐하니해도

아직 무시할수 없는 국가입니다.

 

국가명만 나와있으면 별 소용이 없습니다.

툴팁으로 정보를 내 놓던가.. 아니면 표시를 해야겠죠.

 

 

 

value 값은 면적과 색상을 정하는데 사용하고...

name 값은 표시되는 글자를 정하는데 사용됩니다.

그러므로... value 값을 name값 안에 넣어주면 표시가 되겠죠?

 

 

 

요렇게... 국가명 뒤에 괄호를 넣고, 수치를 넣고, % 기호를 넣어 줬습니다.

자.. 어떻게 될까요??

 

 

 

오.... echarts treemap 표시 이름에 비율이 생겼습니다.

이정도면 툴팁이 없어도 알아볼 수 있겠죠???

그런데 문제가 생겼습니다.

끄응...;;;;

 

 

 

아랍에미리트... 이름이 길지만 수치는 낮아서 ... 표시가 되어있습니다.

이름만해도 저런데.. 옆에 비율이 붙어있으니 당연히 더 표시가 안되겠죠???

그럼 어떻게 해야할까요.. 툴팁을 넣어야하나???

일단 줄바꿈이 있으면 볼 만 할것같은데..

이름은 한줄이고, 두번째 줄에 비율이니..

 

그런데 Apache EChart Treemap 표시 이름 줄바꿈은 어떻게 하죠???

\n 도 넣어보고, \r 도 넣어보고.. <br>도 넣어보고...

뭘 해도 안됩니다.

 

심지어.. \r 또는 \n 을 넣었을경우에는 차트가 출력되지 않았습니다.

흠...

JS에서 줄바꿈은 확실히 \n 이었을텐데....

이리저리 머리를 굴려보다가 아!!!! 설마!!!!! 

 

 

 

\ 기호를 인식시키기 위해 \ 를 앞에 붙여줬습니다.

결과는???

 

 

 

차라~~~~ (유튭버전 야생인 김만덕 버전)

두줄로 잘 나옵니다.

아까 이름이 너무 길어서 슬픈.......거기는???

 

 

 

클릭 안하면 안보이는데, 클릭하니 잘보입니다 ㅋㅋㅋㅋㅋ

아.. 이정도면 진짜 할만 큼 했다...

이제 echarts 트리맵 작업은 끝입니다.

이정도면 된거죠 뭐... 같은계열 색상 변경 / 표시 이름 줄바꿈 설정은 이러합니다.

알고나면 간단하지만 모를때는 막막한거 아니겠습니까 ㅎㅎㅎㅎ

 

저의 Apache ECharts 작업기는 당분간 계속 될 것같습니다.

아직 바 그래프가 남았거든요 ㅎㅎㅎㅎㅎ

그럼 다음이시간에 만나요~~~~~??