[WEB] ECharts 트리맵 글자 CSS Style 효과, 이미지 넣기 : label, rich 옵션

꺄~~~~ 끝난줄 알았는데 다시 돌아왔습니다.

끝나지 않은 트리맵 ㅋㅋㅋㅋㅋㅋ

이번에는 참 어려웠습니다.

항상 그렇지만 알고나면 쉬운... 알아봤자 조금밖에 모르겠다는... ㅋㅋㅋㅋㅋㅋ

 

지난번까지 만든 ECharts 트리맵 차트에서 이제.. 글자의 위치, 크기등의 문제가 있었습니다.

결론적으로는 name 이 아닌 label. 그리고 rich 로 Style 효과를 줄수 있다는것!

이게 끝입니다 ㅎ

 

 

 

크... 고마 기분 쥐기네!!! ㅋㅋㅋㅋㅋㅋㅋㅋ

어제까지만 해도 안될거라고.. 된다고해도 만질게 너무 많아서 그냥 안해야겠다 하고있었는데

그래도 뭔가 실마리를 찾아보려고 미친듯이 찾다보니 어떻게든 되었습니다 ㅋ

이번에는 웹 검색은 안하고, 오직 ECharts 홈페이지에서 옵션과 다른 맵 샘플을 보면서 찾았습니다.

 

 

 

이런식으로 트리맵 안에 2,3줄의 텍스트가 있어야하고, 각각 크기나 표시방법이 달라야합니다.

CSS로 한다면야 할수있는데.. 이건 그런게 안먹히는거라서 ;;;

이를 어찌해야하나...하고 우선 위의 차트를 뜯어봤습니다.

함수가 몇개씩 선언되고.. 거기서 무언가 설정되어서 옵션에서 배열로 호출되고... 어이구야;;;;;

한번 포기했었지만 다시 불타올라서 열심히 뒤지다가 찾은 Echarts 트리맵 rich 옵션.. ㅋㅋㅋㅋ

일단 시작부터 한번 차근차근 해보겠습니다.

 

 

 

요것이 시작입니다.

지난번에 이렇게 해서.. 두줄로 표시는 했었죠???

가만보니.. 두줄인데 괄호는 필요없지 .

그리고 name 으로 들어가면 어떻게든 조절이 안되었습니다.

일단 위치조절을 위해서는 name이 아닌 label을 이용해서 값을 출력합니다.

 

 

 

children 아래에 label을 추가합니다.

혹시나 다른 처리가 들어갈수있으니 formatter에 function을 넣어줍니다.

name 대신 label이 들어가는거죠.

 

 

 

결과적으로는 똑같습니다. 괄호는 없앴구요.. 아까 했던거랑 다를게 없죠?

하지만 지금부터가 다릅니다 후후후후후후후후

 

 

 

보이시나요? label 옵션에는 position을 줄 수가 있습니다.

글자로 top, insideTop, insideTopLeft 이런식으로 줄수도 있고, 수치로 줄 수도 있습니다.

 

 

 

Left : 10, Top : 10 위치가 딱 여기입니다.

캬... 어제 찾을때만해도 name을 어떻게든 움직여보려했는데... 

그렇게하다가 label을 떠올려서 이것저것 시도해보게 될줄이야...

이정도면 저도 어디가서 ECharts 조금은 할줄 안다..라고 해도 되는거 아니까요??? ㅋㅋ

 

 

 

괜시리 필요도 없는 padding을 줘보기도하구요.. ㅋ

윗줄과 아랫줄이 너무 붙어있으니, 이를 띄워야겠죠???

네. 있습니다. lineHeight.

 

 

 

딱 좋을정도로 띄워졌습니다 ㅎㅎㅎ

여기서 끝내도 좋습니다만... 저는 아직 남았습니다.

국가명과 증가율의 크기가 달라야합니다.

후.. 이건 또 어떻게 해야하나.. 엄청 삽질 많이했습니다 ㅠㅠ

 

과정은 다 필요없고!!!!!!!!!!!

결과물은 이겁니다. 

 

 

 

fomatter 에서 function은 지워버리고... [ ].join('\n') 을 써서 배열을 문장으로 만듭니다. 

줄바꿈 기호로 이어버리는거죠. 

즉. 3줄짜리 문자열이 되는겁니다.

 

 

 

formatter 에 넣어준 값들이 다 나왔습니다.

여기서 부터가 중요한데요..

rich 옵션으로 각각 Style을 부여해보겠습니다.

 

 

 

위의 구문만 보셔도 딱 감이 오시죠???

{ [임의의 이름] | ...... }

요렇게 선언해주시고. 아래에 rich로 [임의의이름] 에다가 스타일을 주시면 됩니다.

 

그냥 변수를 선언해서 값을 대입하는거라고 생각하시면 될것같습니다.

저는 이 비유가 제일 와 닿네요 ㅎㅎㅎㅎ

 

{ a|가나다라 } 

 

빨간색으로 a라는 변수를 선언하면서 "가나다라" 라는 값을 대입했습니다.

즉. "가나다라" 라는 값을 가진 a 라는 변수가 생긴것이죠.

rich는 이 변수에 꾸밈을 추가하는거라 보시면 되겠습니다 ㅎㅎㅎ

 

이런식으로 ECharts 트리맵 글자 CSS 효과 주실수가 있습니다.

결과물을 한번 볼까요?

 

728x90

 

 

크.... 세줄의 문자열에서 정확하게 Style이 먹혀잇는게 보이시나요??

글자 크기가 제각각으로 설정이 되었습니다.

물론, 진짜 CSS 하는것처럼 여러가지로 다재다능하게 설정은 못합니다만..

그래도 이정도만 되어도 EChart 트리맵 CSS 스타일 주는 효과는 확실하게 누릴 수 있죠.

각 블럭의 색이야.. 전혀 다른데서 세팅해야하는거니..

보이는 글자를 꾸미는게 중요했거든요.

 

 

 

margin이나 padding은 없으니.. 줄 사이를 띄우려면 아까 label 옵션에서 lineHeight를 이용하시면 됩니다.

 

 

 

이제 보기좋게 되었네요 ㅎㅎㅎㅎ

앞쪽이 좀 떠있는건.. rich 설정을 위해 선언시 띄워야되는지 아닌지 몰라서 일단 띄웠거든요.

바로 이부분입니다.

  

 

 

선언 뒤에 띄워야하는건가싶어서 띄운건데, 그럴필요 없습니다.

바로 필요한 문자를 입력하시면 되는거죠.

 

 

 

앞쪽에 뜨는거 없이 잘 나왔습니다 ㅎ

단순히 크기만 조절할 수 있는게 아니라 당연히 색깔도 바꿀수가 있습니다.

하나 추가를 해서 확인 해 보겠습니다.

세번째 last를 바꿔보겠습니당.

 

 

 

보시는것처럼 { last|LAST }

라고 last 변수를 만들고 "LAST" 라는 값을 넣었습니다.

아래 rich 에서 last 라는 변수값을 13의 크기에 색상을 지정해줬습니다.

결과는?

 

 

 

이렇게 ㅎㅎㅎㅎ

크기도, 색상도 잘 바뀌죠???

ECharts 트리맵 rich 옵션에 대해서 조금 알것같습니다.

조금씩이라도 알아가니 재밌네요 ㅎㅎㅎㅎ

 

그럼.. 이제 이미지를 넣어볼까요???

이미지 넣는 예제가 있었는데, 문득.. 어차피 저는 국가명을 출력하고 있으니

그렇다면 이미지로 국기를 넣어도 되지 않을까????

라는 생각으로 시작 된 이미지 넣기.

 

<img> 태그를 쓰는것처럼 그냥 넣는게 아니라 약간 응용을 합니다.

Echarts 트리맵 이미지 넣기 위해서는 backgroundColor 옵션에다가 image 세팅을 해줍니다.

아래에 제가 적용한 코드가 있습니다.

 

 

 

a 부분이 국가명이 들어가니 뒷쪽에 last를 넣어줍니다. 값은 없습니다. 빈값이라도 문제없습니다.

오히려 이미지가 들어갈거니 글자가 있으면 겹쳐보이겠죠?? 어느 한쪽이 안보이거나.

그리고 이미지는 위에 말씀드린대로... rich 안에서 backgroundColor 옵션을 주고 image 에다가 이미지 경로를 넣어줍니다.

자.. 잘나올까요?? 긴장이 됩니다.

 

 

 

색색이 아름다운 코딱지들이 붙었네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

크기가 너무 작다.. 

이건 트리맵 label 기본 크기가 이모양이라서 그렇습니다.

그럼 어떻게 바꿔야할까요?? img 태그가 있는것도 아닌데...

 

이런걸 만지다보니 그냥 CSS 쓸수있으면 얼마나 좋을까.. 라는 생각도 듭니다만.. ㅎㅎㅎㅎ

크기는 뭐 간단합니다.

바로... label 로 되어있으니 크기만 키워주면 이미지도 크기가 커집니다.

background 종류니.. 당연히 last 라는 영역 배경을 이미지가 붙었다고 생각되니..

last를 크게만들면 배경도 커지겠죠.

 

바로 fontSize를 키워보겠습니다.

 

 

짜잔~~~ 40의 크기로 키우니 확실히 이미지가 커집니다.

이렇게 색도 바꾸고 크기조절도하면서 이것저것 맞춰가고 있으니

ECharts 트리맵 글자 CSS 적용하고 있는것 같습니다 ㅋㅋㅋㅋ 이미지 넣기도 하고..

자.. 여기서 크기를 조절해도 조금 글자보다 아래로 쳐진 느낌인데요..

 

옵션중에 verticalAlign 이 있습니다.

오... 바로 적용합니다.

 

 

크기를 15 줄이고, 위로 붙도록 세팅을 했습니다.

확실히 쳐진 느낌은 나지 않습니다.

캬.... 만족한다.

근데 이미지가 들어가니 좀 번잡한 느낌이 ;;;;;

그래서 일단 뺐습니다 ㅋㅋㅋㅋ

 

트리맵의 글자를 name에서 label로 바꾼다음에

이런저런 꾸미기까지 해 봤습니다.

더 많은 옵션들이 있는데요.. 일단 글자는 이정도로 꾸밀수가 있을것 같습니다.

솔직히 저는 여기까지 한 것 만으로도..너무 만족합니다 ㅋㅋㅋㅋ

안될것 같다.. 너무 오래 걸릴것 같다는걸 결국은 해 냈으니까요 ㅋㅋㅋ

 

ECharts 마스터가 되려는게 아니라, 제가 하고싶은 세팅을 하는거라서

충분히 만족합니다 ㅋ

이제는 진짜로 Treemap 차트에 손을 대는일은 없을것 같습니다.

시안과 거의 비슷하게 되었으니까요.

 

ECharts 트리맵 글자 CSS 꾸미기 효과 / 이미지 넣기 이제는 어렵지 않습니다!!

자신이 조금씩 생기네요 ㅎㅎㅎㅎ