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을 만들어서 처리해줄 수 있다.
'Frontend > Apache Echarts' 카테고리의 다른 글
[echarts] Apache Echarts 에 click event 적용하기 (2) | 2023.09.22 |
---|---|
[echarts] Apache Echarts 브라우저 크기에 따라 자동 사이즈 조정 (2) | 2023.09.22 |
[echarts] Apache Echarts options 정리 (2) | 2023.09.22 |