Vue Echart 특정구간 확대 DataZoom, zoom reset , toolBox

 

 

Echart 에서 특정 구간 확대할때 필요한건 toolBox 이다. 

 

예를 들면 위에 그래프 상단 오른쪽에 있는 아이콘들을 말하는것이다. 

왼쪽부터 나열하면

데이터 줌 | 줌 리셋 | 데이터 뷰 | 꺾은선 그래프로 보기 | 막대 그래프로 보기 | 리플래쉬 | 이미지 다운로드 

이렇게 있다. 

 

 

Echart 옵션을 추가할때 사용하면 된다. 

 

 

// 차트 옵션 설정
const option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: 'Sample Series',
      type: 'bar',
      data: [10, 20, 30, 40, 50],
    },
  ],
  //////////////// toolbox start ////////////////////
  toolbox: {
    show: true,
    iconStyle: {
      borderColor: "#fff", // 아이콘 색상 변경 
    },
    feature: {
      saveAsImage: {show: true }, // 이미지 저장 기능
      dataView: {show: true }, // 데이터 표시 기능
      dataZoom: {show: true }, // 데이터 확대 축소 기능
    },
  },
  ////////////////// toolbox end /////////////////////
};

 

옵션 영역안에 toolbox 위에 코드처럼 수정할수 있다. 

먼저 toolbox 사용 한다고 show를 보여주고 프로젝트 그래프 색상이 어두워서 아이콘 흰색으로 포인트 주기위해서

흰색으로 색상 변경을 했다. 

 

그다음 필요한 기능들을 소스 짜준 형식으로 만들어주면 됩니다! 

 

 

 

 

https://echarts.apache.org/en/option.html#toolbox

Documentation - Apache ECharts

 

 

좀더 많은 기능을 보려면 위에 Echart 사이드 들어가서 참조 하면 좋을거같네요!! ㅎㅎ