[문제해결] E-Chart 새로고침시 크기 초기화

→ onMount 훅을 사용해서 처음 렌더링 될 경우에는 문제가 없지만, 새로고침 시에는 (초기화가 이루어지지 않아) 배열이 비어있을때도(data) 차트가 렌더링 되기 때문에 차트의 초기화 에 문제가 발생했다.

→ 비동기작업으로 데이터를 넘겨주고 있는 상위 컴포넌트 에서 if 문으로 데이터가 있을 경우에만 BarChart 가 렌더링 될 수 있도록(컴포넌트에 조건문을 추가해) 처리해주었다.

→ 따라서, 비동기 작업을 처리할때 상위 컴포넌트에서 Loder UI 를 처리하는 습관을 가지는게 좋다.

[ BarChart.svelte ]

---

• Code

  <script lang="ts">
    //#region Import
  		...
    //#endregion
  
    // #region onMount
  	// onMount 내부에서 차트 초기화가 이루어 지고 있다.
    onMount(() => {
  		...
  	  chartControl = echarts.init(chartContainer);
  
      if (chartContainer) {
        // console.log('Chart Container Exist');
  			...
        // console.log(series, 'data ');
  
        chartControl.setOption({
          grid: {
            left: '6%',
            top: '15%',
            right: '6%',
            bottom: '12%',
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              formatter: function (value: string) {
                return `${value} ${xAxisLabelUnit}`;
              },
              align: 'center',
            },
          },
          yAxis: yAxisOptions,
          series: series,
          dataset: {
            dimensions: dataSourceDimension,
            source: dataSource,
          },
          // 범례 출력
          legend: {
            textStyle: {
              color: '#ffffff',
            },
            inactiveColor: '#2E2F31',
          },
          // 마우스 오버시 상세값 출력
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                formatter: function (parms: any) {
                  return `${parms.value} ${xAxisLabelUnit}`;
                },
              },
            },
          },
        });
      } else {
        console.log('Chart Container Not Exist');
      }
    });
  
    // #endregion
  
    //#region afterUpdate
  		...
    //#endregion
  </script>
  
  <div id={chartId} class="" style="width: 100%; height: 98%" />
  
  <svelte:window bind:innerHeight={screenHeight} />

[ 상위 컴포넌트 ]

---

• Code

  <script lang="ts">
  ...
  </script>
  
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  ...
  <!-- Chart 1 -->
  // 데이터가 없을 경우 Loder UI 출력
      {#if operationReport.length > 0}
        <BarChart
          chartId="OperationReport"
          yAxisNameLeft="가동률"
          seriesCount={1}
          isDualYAxis={false}
          dataSourceDimension={['report_date', 'operation_rate']}
          legendData={['가동률']}
          bind:dataSource={operationReport}
          bind:periodType={operationPeriodType}
        />
      {:else}
        <Loader />
      {/if}
  // 데이터가 없을 경우 Loder UI 출력
  <!-- Chart 2 -->
    {#if productReport.length > 0}
      <BarChart
        chartId="ProductReport"
        yAxisNameLeft="작업수량"
        yAxisNameRight="불량률"
        seriesCount={2}
        isDualYAxis={true}
        dataSourceDimension={[
          'report_date',
          'product_count',
          'product_fault_rate',
        ]}
        legendData={['작업수량', '불량률']}
        bind:dataSource={productReport}
        bind:periodType={productPeriodType}
      />
       {:else}
        <Loader />
      {/if}

Uploaded by N2T