[Vue] Echart 쉽게 사용하기

1. Echart 사용기

구글링을 하면서 정말정말 안나오는게 바로 이 차트에 관련된 설명이였는데, 실제로 사용자 화면에선 많이 보여주지 않지만 관리자 화면에선 무조건 들어가야하는 요소이기때문에 초반에 너무너무 고생했던게 기억이 난다.
사실 amChart 나 echart , chartjs 등등 너무 좋은 라이브러리가 있지만, 기본적이 스타일의 차이나 핸들링에 대한 차이가 있었다. 코드 길이로 보면 amChart가 가장 길고 복잡하고 까다롭지만 개인적으론 개발하는 입장에서 특정 이벤트를 주기에 가장 용이했다. echart 경우에는 개별적 범례 이벤트같은 복잡한 설정은 불가능했다(이거때문에 한 2주는 고생한듯) 그럼에도 불구하고 차트가 매우 예쁘기 때문에 특별한 기능이 있지 않는 경우에는 매우매우 애용하는 차트중 하나이다!

 

 

 

 

2. echart를 간단하게 vue에 적용한 방법

- npm i echarts 실행

<script>
  import * as echarts from "echarts"; //echart를 전역으로 불러옴
  
  export default {
  	name:'',
    data(){
    	option :[], //옵션 넣기
    },
    mounted(){
      var chartDom = document.getElementById('차트 id');
    
      var myChart = echarts.init(chartDom);
      
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose(); //차트돔이 먼저 생성된 경우 기존 돔을 삭제해준다
      }
      
      myChart = echarts.init(chartDom);
      
      var option;

      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '10px',
          width: '300px',
        },
        series: this.series, //속성들은 echart 에 잘 나와있으니 설명을 보고 넣으면 된다
      };

      option && myChart.setOption(option);
      
      //윈도우 사이즈가 변경될때마다 resize되도록 설정해준다
      window.onresize = function () {
        myChart.resize();
      };
      
    }
 }
</script>

 

e차트는 까고깔수록 나오는 변수나 이벤트가 많으므로, 홈페이지만 잘 찾아보면 누구든 쉽게 활용이 가능하기때문에 매우 추천하는 차트중 하나이다! 주의할 점이 하나 있다면 window 가 감지되기 전에 차트를 실행하면 작동이 안할수 있다, 그리고 너비와 높이를 필수로 입력해주어야 동작한다.

 

 

 

 

- window 가 없는 경우 return 실행

- 너비, 높이 필수로 작성하기

 

 

 

3. 데모 사이트 확인하기

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

Examples - Apache ECharts