[Echart] 기존 그림 정리

문제

---

한 가지 데이터로 여러가지 그래프를 계속 변경해주어야 했고, 각각 다른 옵션을 정의해야했다.

하지만 Echart에 대한 지식이 그리 깊지 않았고 이러한 상태에서 궁금한 점이 하나 있었다.

기존에 작성한 정보는 정리를 안해주나?

막대그래프 이후 파이그래프를 그리면 뒤에 축이 남아있다.

하나의 차트 컴포넌트에 다른 옵션을 적용했을 때, 다음과 같은 문제가 발생하였고, 기존에 남아있는 그래프가 오버랩되어 표시되거나, 중복되는 축으로 에러가 발생하는 일도 자주 발생하였다.

시행착오

---

처음 시도했던 방법은 단순히 축에 대한 정보를 제공해 주었다.

{
    xAxis: {
        show: false,
    },
    yAxis: {
        show: false,
    }
}

파이그래프를 작성할 때 단순히 해당 축을 보여주지 않으려고 했었다.

하지만 이 방법은 손바닥으로 하늘을 가리고자 했던 방법이었다.

그래프가 오버랩되거나, 모든 파이그래프의 옵션들을 수정해 주어야 하는 등의 문제가 있었다.

setOption(newOption, true)

mychart.clear()

두 방법의 경우 모두 echart-for-react를 이용해서 Echart를 직접 이용하고 있었던 나에게 적용할 수 없는 방법이었다.

해결

---

생각보다 단순한 방법으로 해결할 수 있었다.

<ECharts
  option={optionState}
  notMerge={true}
/>

notMerge={true}를 적용해주면 앞서 발생한 모든 문제를 해결할 수 있다.