apexchart 데이터 넣기

대시보드 내에 apexchart로 작업하는 내용들이 있어API에서 받아오는 값들을 바인딩하던 중 직접 값을 넣는 것이 안된다는 것을 파악해 정리하는 글.

<apexchart
     type="donut"
     height="300"
     :options="dm.chartOptions"
     :series="dm.series"
/>

series에는 내가 출력할 실질적인 데이터를 담는다.
options에는 label이나 title을 담는다.

async getDashData() {
      const output = await this.GET_DASH_INFO();
  // 먼저 액션을 가져와서 데이터를 부른다.

      const dmSuccess = await output.reduce((total, entry) => total + entry['DM SUCCESS'], 0);
      const dmWait = await output.reduce((total, entry) => total + entry['DM WAIT'], 0);
  
      const dmList = [dmSuccess, dmWait];

  // 그리고 dmList에 성공과 대기를 담는다.

      this.dm = {
        series: [...dmList],
        chartOptions: { ...this.dm.chartOptions },
      };
  
 	 mms: {
        series: [],
    //data에서 mms 객체 안에서 저렇게 빈배열로 선언해두었고, 
   // 얕은 복사로 저 안에 값을 넣어야한다.(직접적으로 할당이 안되는 apexchart)
      

나는 받아오는 값을 바로 dm.series= dmList 예를들면 이렇게 바로 할당하였는데 Apexchart 특성상 저렇게는 안된다고 한다.