[WEB] Apache ECharts 라인 바 혼합차트 적용 - CDN 간단 세팅

 

차트.. 참 많이 쓰죠.

유료, 무료가 있는데 저는 무료를 열심히 찾아다닙니다.

기능이나 퀄리티는 유료가 훨씬 낫겠지만.. 뭐 언젠가 결제 해 주겠죠 ㅋㅋㅋㅋㅋ

일단은 무료로 어찌저찌 버티는데.. 지난번에 트리 차트가 필요해서 C3 차트 보다가..

너무 사용법이 달라서 공부를 해야하나.. 하던중에

Apache ECharts 라는걸 알게 되었습니다.  중국 바이두에서 만든 차트 라이브러리 인데요..

되게 깔끔하고, 사용법도 간단하면서 무엇보다 사이트에서 바로 수정해서 결과물을 확인도

해 볼수 있다는게 좋았습니다.

 

트리 차트같은경우는 다른데서 찾기 힘들었고.. 무료라면 말이죠.

 

저같은 초보들은 일단 예제라도 적용하기가 쉬워야합니다.

일단 적용해서 그래프가 나온 다음에 이런저런 옵션들을 찾아보면서 수정할 수 있으니까요.

첨에는 toust.ui 쪽에서 해 보려했는데... 예제조차 출력하기가 힘듬 ;;;

좀 아는사람들만 들어가서 쓰라는식이라서 때려쳤습니다.

 

 

echart 앞에 아파치는 왜 붙는건지 모르겠습니다만...

오픈소스라서 그런건가..??

 

https://echarts.apache.org/examples/en/index.html

 

 

요기 가시면 샘플들 나와있습니다.

종류가 참 다양해서 맘에 듭니다.

 

 

 

저는 이 중에서 Mixed Line and Bar. 라인 바 혼합차트 이용을 해 보겠습니다.

클릭하시면..

 

 

 

화면이 이렇게 나옵니다.

좌측에는 JS / TS 별 코드가 나와있고, 오른쪽에는 결과물이 나와있습니다.

왼쪽에 소스만 갖다붙이면 나오긴하는데요..

당연히 CDN 및 기본선언 및 출력부분은 추가되어야합니다.

 

Apache ECharts CDN 은 이렇게 넣어주시면 됩니다.

 

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

 

이 시점에서 최신버전이라 하실 수 있는데요, 좀 뒤져보시면 다른 버전도 있습니다.

그 다음.. 좌측 위에 edit code 오른쪽에 Full Code 를 클릭하시면 var 선언 부분과 제일 아래에 출력부분이 나옵니다.

이거 싹~ 복사하셔서 붙여넣으시면 기본 그래프는 나옵니다.

id 맞춰주시는건 잊지마시구요.

 

대략 이런 순서가 됩니다.

 

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

<script>

  [소스]

</script>

 

 

무턱대고 복사해서 수정하는것보다.. 일단 사이트에서 원하는 모양을 만든 다음에 복사해 가도록 하겠습니다.

 

 

 

우선은 그래프 우측상단의 이 아이콘들.

 

 

 

toolbox 부분입니다.

딱 봐도 show 라는것도 보이고.. 아.. 알기쉽다 ㅋㅋㅋㅋㅋ

 

 

 

Data View 는 데이터를 그냥 텍스트로 보여주고, 나머지는 눌렀을때 라인 바 혼합형 차트를 라인 차트 / 바 차트.

이렇게 2개로 합쳐서 보여줍니다.

저는 필요없으니.. 이런것들 다 지워버리겠습니다.

 

 

 

혹시.. 이미지로 다운받을일은 있을수도 있으니.. 하나만 남겨두고 싹 지웁니다.

 

 

 

그럼 이렇게 아이콘들이 정리가 됩니다.

필요한 기능은 넣어서 사용하시면 될것 같습니다 ㅎㅎㅎ

 

좀 아래로 내려가면.. legend 가 보입니다.

 

 

 

딱 봐도.. 라인, 바 데이터를 담당하는 label 같은 느낌이라서 바꿔 봅니다.

 

 

 

어... 위에 어떤색이 어떤 항목인지를 보여주는게 하나 사라졌습니다 ;;

보통 바꾸면 적용이 되는데.. 왜 사라질까요?

이유는 나중에 보시면 나옵니다.

 

 

 

당장 사라지더라도 개의치마시고 원하는 값으로 바꿔줍니다.

그 다음에 손 볼것은... 바로 카테고리입니다.

 

 

 

바로 이거.. Mon Tue... 요일을 나타내는 xAxis 의 label 인데요.

이건 그냥 바꿔주시면 됩니다.

어디서?

 

 

 

바로 여기.

xAxis 라고 되어있는데 안에 보시면 type은 category.

data에 들어있습니다.

 

 

 

나중에 날짜를 넣을꺼니까 일단 이렇게 해 줍니다.

웹에서 일단 만드는거니까 데이터는 임의로 넣어주시고, 나중에 적용하신 다음에

데이터는 유동적으로 받아서 표시할 수 있게 해주시면 됩니다.

 

가로축은 봤으니.. 이젠 세로축인 yAxis 부분을 보시겠습니다.

 

 

 

아까 legend 에서 나왔던 이름들이 여기도 보입니다.

그리고 {value} ml 라던가.. {value} ℃ 라는게 보입니다.

그리고 2개 밖에 없다!  딱 봐도 감이 오죠?

 

 

 

바로 이 부분입니다. 세로축 부분.

양쪽으로 단위랑 데이터가 나오고.. 세로축이 어떤것인지 보여주는 label 부분이 있습니다.

여기도 바꿔야겠죠?

 

 

 

axislabel을 이렇게 바꿔줍니다.

저는 달러와 퍼센트를 나타낼거라서.. 위치와 함께 단위를 바꿨습니다.

그리고 name 부분은 한글로 바로 쓰셔도 됩니다.

 

 

 

요렇게. 잘 바뀌었습니다.

왼쪽을 금액.. 오른쪽은 증가율!

 

이제부터.. 본격적인 데이터 부분을 손 볼건데요...

다음 부분입니다.

 

 

 

series 파트입니다.

막대랑 선이 표시하는 부분입니다.

여기에 name을 보시면... legend 에서 봤던 3개의 이름이 각각 들어있습니다.

3개인 이유는... echarts 혼합차트 라서 그런거 아시죠?? 바 / 라인 둘다 있어야하니.. type이 다르게 되어있습니다 ㅎㅎ

이걸 여러가지로 바꿔보면 더 재밌는데요. 지금은 그런거 할 때가 아니니까..

 

여기서 이름을 legend에 넣은 이름과 동일하게 바꿔보겠습니다.

 

 

 

우선 처음부터... 이번 달 이라고 변경!!!

오오~~~

 

 

 

아까 위에서.. 사라졌던 부분이 나타났습니다~!!!!!!!

legend 에 선언 한 이름이 series의 name에 있어야 나오는 구조입니다.

다른 이름을 입력하면 다시 사라집니다 ㅎㅎㅎㅎ

 

 

 

그렇게 제대로 세팅을 했습니다.

이녀석들은 언제 쓰느냐?? 필요없는거 아닌가?? 라고 생각하실 수 있는데요.

이중에 하나를 클릭 해 보시면..

 

 

 

이런식으로 데이터를 지웠다가 보였다가. 동적인 움직임이 가능합니다.

이런건 필요없다! 라고 하신다면 지우셔도 괜찮습니다.

 

 

 

다음으로는... tooltip 안의 return 부분을 바꿔줍니다.

제가 표시하고싶은 위치와 기호로 말이죠.

저는 달러와 증가율.. 퍼센트입니다.

달러 기호는 앞에있고, 퍼센트는 뒤에 있습니다.

그래서 이렇게. 변경을 했습니다.

이건 뭔가?? 툴팁은 마우스오버시 나오는 창입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이렇게. 제가 원하는 모습으로 기호가 잘 나옵니다 ㅎㅎㅎㅎㅎ

series의 name 부분을 그대로 가져와서 표시하는데요.

legend 와 이름이 안맞아서 윗쪽이 표시가 안되더라도.. 툴팁에서는 이름이 잘 나옵니다.

 

 

 

다음으로는... 제가 적용할 데이터와 비슷한 영역대로 데이터를 세팅을 해 봅니다.

일단 모양새가 잘 나오는지 한번 봐야겠죠??

 

 

 

네. 엉망 진창입니다 ㅋㅋㅋㅋㅋ

분명 echart 혼합 차트를 적용했는데.. 그런 느낌이 전혀 안납니다.

가만보고있으니....

흠..

양쪽으로 yAxis 값을보니.. 최저치와 최대치가 문제인것 같습니다.

증가율이 - 수치가 있음에도 0에서 고정되어있는걸 보면 말이죠.

 

그럼 다시 yAxis 옵션을 봅니다.

 

 

 

역시나. 금액 부분에 min : 0 / max : 250 / interval  : 50 이라고 세팅이 되어있습니다.

최저는 0. 최고는 250. 단계는 50.

즉. 0부터 50씩 250까지 나온다는 말입니다.

이렇게 지정되어있으니.. - 영역대는 표시도 안되고, 250 이상은 나오지 않는거죠.

 

 

 

저는 이렇게 했습니다.

금액이 0보다 작아질 일은 없으니 min: 0 값은 그대로 두고..

최고치와 단계를 지워버렸습니다.

증가율은 그냥 다 지웠구요.

이렇게하면 어떻게 나올까요?

 

 

 

오.. 그럴싸하게 나옵니다.

Apache ECharts 복합 차트 완성이라고 볼수도 있겠죠????

조금 더 손을본다면... 몇개 더 있지만 담번에 해보도록 하겠습니다.

 

 

 

툴팁까지 완벽하다... 크... ㅋㅋㅋㅋㅋㅋ

echarts 같은경우에는 검색을 해도 정보가 그리 많지 않습니다.

하지만 검색과 함께 테스트를 계속 해 보다보면 길은 보입니다 ㅎㅎㅎ

간혹 이차트 정보를 올려주시는 분들이 계셔서 참고를 많이 하고있습니다.

그리고 옵션에 대해서는 공식 홈페이지에서도 잘 나와있구요.

 

다만... 어떤게 어떤부분인지 알수는 없으니 그저 두들겨보며 확인하는 수 밖에 없을지도 모릅니다 ㅋㅋㅋ

검색해서 나오면 다행이지만...

 

단순히 bar 차트나 line 차트를 사용하시더라도 옵션들은 비슷하니까 응용 가능합니다.

 

 

원래는 이것보다 더 복잡한.. 혼합 y축 차트를 썼는데 이게 더 깔끔해 보이더라구요 ㅋㅋㅋ

그래서 이대로 도입을 해볼까 생각중인데.. 일단 좀 더 해봐야겠습니다.

토스트 차트보다 초보가 해보기에 훨씬 편한 이차트.

 

ECharts CDN 세팅 및 기본세팅. 그리고 혼합 차트의 간단한 옵션 세팅까지 해봤는데,

나중에 저처럼 이런거하다가 몰라서 검색하고 도움 받았듯, 다른 분들에게 도움이 되길 바라며..

담번에는 좀 더 다른 커스터마이징을 해 보겠습니다.