[echarts] Apache Echarts options 정리

Heatmap, Line Chart를 만들어보면서 주로 사용했던 options 정리

추후에 새롭게 사용되는 요소들은 그때마다 추가 할 예정

 

 

• formatter - 해당 option은 어디서든 공통으로 사용됨
  • tooltip, legend, UI color 등 다양한 곳에서 활용할 수 있음
  • 위의 요소들이 UI상으로 표기되는 방식을 원하는 모습으로 변경함
  • return은 문자열로 하되, 해당 문자열 구성자체에 html 태그를 넣어서 구성하면, 태그가 적용된 채로 UI가 구성됨

return `<p style="font-size: 16px">formatter test</p>`

 

• tooltip
  
  • mouse를 hover했을 때 나오는 tooltip
  • trigger
    • tooltip이 무엇에 의해 trigger 될 지 정함
    • 보통 axes를 이용해 축에 의해 tirgger 되는 방식을 사용하는 듯함

 

 

• axisPointer
  • mouse를 chart에 hover했을때, 세로 또는 가로로 가이드라인과 같은 점선이 나오게 함.
    그리고 해당 axis value를 mouse 아래쪽에 나오게 함
  • link
    • axisPointer가 서로 다른 chart에서 동일한 특정 axes(축) 을 가졌다면 동시에 나타나도록 함
    • xAxisIndex
      "all" 이라고 사용한다면, x축의 값이 동일한 값들엔 같은 axisPointer line이 동시에 나타나게 됨
      
      

 

 

• grid
  • series에서 선언하고 사용중인 chart들의 size 및 position을 결정함
  • series에서 선언한 순서대로 grid 배열안의 요소로 customizing 가능
  • left, right, top, bottom, width, height 등이 있음
    
    

 

 

• xAxis, yAxis
  • x축, y축
  • type
    • 축의 type을 의미함
      보통 category를 사용해서 표현하는듯함
    • data
      축에 들어 갈 data value
      react에서 사용할 땐 축의 값으로 사용하고 싶은 state를 넣어주면 됨
  • axisLabel
    • 축에서 표현되는 값의 UI와 관련된 option
    • rotate
      축의 값을 회전시킬 수 있음
  • splitArea
    • show
      true 라고 설정하게 되면 축에 표현되는 값들을 splitArea ( 구분선으로 보임 ) 로 구분해서 UI로 표현
  • axisTick
    • 축의 값이 구분선 ( tick ) 의 어디에서 보여지게 될 지를 정함\
    • alignWithLabel
      true 라고 하게되면 tick의 바로 아래에 축의 값이 보여지게 됨
  • gridIndex
    해당 chart의 grid index를 지정해줌
    
    

 

 

• visualMap
  
  • chart들의 값들의 범위, 색상, 정보와 관련된 option
  • min, max
    chart의 값들의 최소, 최댓값
  • inRange
    color 속성을 통해서 chart의 색상이 data의 값에 따라 최소 ~ 최대 어떤 색상으로 표현될 지를 정함
  • orient
    차트의 정보를 보여주는 visualMap을 가로로 표현할 지, 세로로 표현할 지 정함
  • right, top ...
    visualMap의 위치를 정할 수 있음
  • calculable
    true로 하게 되면 visualMap에서 현재 보고있는 chart의 값을 강조하는 UI가 생기게 됨
    
    

 

 

• series
  • chart를 정의하는 option
  • 동시에 여러 chart를 만들고 싶다면, series 배열 안에 차례대로 정의해주면 됨
  • name
    chart 의 이름
  • type
    chart의 종류 ex) line, heatmap ...
  • data
    chart에서 다룰 data, react의 경우 표현하고 싶은 state를 넣으면 됨
  • symbolSize
    특정 chart들에선 symbol이 존재 ( line chart에선 값의 point 지점 ) 그들의 size를 조절할 수 있음
  • xAxisIndex, yAxisIndex
    x, y축의 index를 지정할 수 있음