vue-echarts 에서 markArea 사용하기

 

백그라운드에 하이라이트를 적용하고 싶은데, markArea 옵션이 제대로 적용이 되지 않았다.

나는 vue-echarts 라이브러리를 사용하고 있는데 처음에 버그인줄 알았다. 하지만 아니었다.

echart 에서 제공하는 옵션 중 하나인 markArea 를 vue-echarts 에서 사용하려면 MarkAreaComponent 컴포넌트를 임포트 해야 한다.

import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkAreaComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';

use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, MarkAreaComponent]);

markArea 옵션이 왜 적용이 안 되는 지 한참 헤맸다.

컴포넌트를 임포트하면 아래 echart 공식문서에 나와 있는대로 옵션 밑에 무리 없이 사용할 수 있다.

https://echarts.apache.org/examples/en/editor.html?c=line-sections 

Examples - Apache ECharts

series