[echarts] Apache Echarts 원하는 데이터 포인트만 UI 변경하기

Line chart 같은 걸 그리다 보면
특정한 symbol 과 같이 원하는 데이터만 chart UI를 변경해야 하는 경우가 생긴다.

 

React + Typescript 에서 해당 경우를 처리하는 방법이다.

// data에서 내가 강조하고 싶은 point의 index
const nowIndex = 0 


// chart option의 series를 예로 든다.
series: [
    {
      name: "Line Chart",
      type: "line",
      data: props.data,
      symbolSize: function (value: number, params: any) {
        // 클릭한 데이터의 심볼 크기 설정
        // 강조하고 싶은 index랑 동일하다면 10으로 기존 크기 6보다 좀 더 크게
        return params.dataIndex === nowIndex ? 10 : 6;
      },
      itemStyle: {
        color: function (params: any) {
          // 강조하고 싶은 index랑 동일하다면 red로 기존 색상과는 다르게
          return params.dataIndex === nowIndex ? "red" : params.color;
        },
      },
    },
]

 

해당 코드와 같이 굳이 formatter를 사용하지 않더라도 직접 customizing한 function을 만들어서 처리해줄 수 있다.