[js][Echarts] Click event, 클릭한 차트의 Id 구하기

echart 클릭 이벤트로 클린한 차트의 id 구하기

myChart.on('click', function(params) {
    var chartId = params['event']['target']['id'];
    console.log("Clicked chart ID: ", chartId);
});

 

그런데, 이것은 차트영역 div의 id 속성이 아니라, echarts에서 지정한 차트 요소 각각의 id여서, 

원한값이 아니었고,

 

<div id="chartContainer"></div>


var chartContainerId = 'chartContainer';
var chartContainer = document.getElementById(chartContainerId);
var myChart = echarts.init(chartContainer);

chartContainer.addEventListener('click', function() {
    console.log("Clicked chart container ID: ", chartContainerId);
});

 

그냥 따로 요소에 이벤트를 생성해 주었다.

 

원하던 로직은, 차트를 클릭하면 받는 param에 idx값을 받아서 

해당 차트를 클릭하면 차트에 해당하는 리스트 데이터를 조회해서 보여주는 것이었다.

그래서 아래의 차트 클릭이벤트에서는

myChart.on('click', function(params) {
    var chartId = params['event']['target']['id'];
    console.log("Clicked chart ID: ", chartId);
});

이걸로 얻은 데이터를 따로 받아놓고, 리스트 검색을 하지않고,

차트의 div요소 클릭 이벤트가 발생할때 얻은 데이터를 이용해서 검색하게 로직을 짰다.