echart 2

[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.d..

[echarts] Apache Echarts options 정리

Heatmap, Line Chart를 만들어보면서 주로 사용했던 options 정리 추후에 새롭게 사용되는 요소들은 그때마다 추가 할 예정 formatter - 해당 option은 어디서든 공통으로 사용됨 tooltip, legend, UI color 등 다양한 곳에서 활용할 수 있음 위의 요소들이 UI상으로 표기되는 방식을 원하는 모습으로 변경함 return은 문자열로 하되, 해당 문자열 구성자체에 html 태그를 넣어서 구성하면, 태그가 적용된 채로 UI가 구성됨 return `formatter test` tooltip mouse를 hover했을 때 나오는 tooltip trigger tooltip이 무엇에 의해 trigger 될 지 정함 보통 axes를 이용해 축에 의해 tirgger 되는 방식을 ..