[eCharts, React] 범례(legends) 클릭에 따라 eCharts 조작하기

eCharts의 legendselectedchange event 를 활용하는 방법

interface iParams {
  name: string
  selected: Record<string, boolean>
  type: string
}

const chartDom = document.getElementById('trend-multi-naver-chart') as HTMLElement
const myChart = echarts.init(chartDom)

myChart.on('legendselectchanged', (params: iParams) => { //'legendselectchanged' 이벤트가 발생했을 때 실행된다.
  changeSelectGraph(params)
})

function changeSelectGraph(params: iParams) {
  myChart.dispatchAction({
    type: 'legendSelect',
    name: params.name,
  })
}

단, 이 경우 초기에 설정해준(인위적으로 넣어준) legend 값이 제대로 적용되지 않을 수 있다.
legenddml selection state 을 인위적으로 건드려야할 때는 useState 등으로 들어갈 값을 선언해준후, 'legendselectchanged' 이벤트가 발생할 때 마다 params.name과 내가 조절하고 싶은 값의 name을 비교하며 선언해준 값을 조작해주어야한다.