ProgrammingEcharts

Echarts-차트에 클릭 이벤트 생성하기 01

Echarts, echart, echart 한글, echarts click event, echarts event, 이차트, 이차트 이벤트

Echarts-차트에 클릭 이벤트 생성하기 01

차트에 클릭 이벤트를 생성해보자

우선 차트의 클릭 이벤트를 만들기 위해 아래와 같이 사용할 수 있습니다.
아래의 방법으로 params 에 무슨 값이 넘어오는지 확인 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 준비된 돔에 Echarts 인스턴스를 생성합니다
var myChart = echarts.init(document.getElementById('main'));

//차트의 데이터와 구성을 설정합니다
var option = {
    xAxis: {
        data: ["shirt","cardign","chiffon shirt","pants","heels","socks"],
        axisLabel: {
        	//x축의 모든 데이터를 보여준다
            interval: 0,
        },
    },
    yAxis: {},
    series: [{
        name: 'sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
//위에서 준비한 option값을 myChart에 반영합니다.
myChart.setOption(option);

//차트를 클릭하면 새로운 창이 생성되며 naver search page로 이동합니다.
myChart.on('click', function (params) {
    window.open('https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=' + encodeURIComponent(params.name));
});

위의 만들어진 차트의 붉은색 막대를 클릭하면 새로운 창이 생성되며 각 xAxis 데이터["shirt","cardign","chiffon shirt","pants","heels","socks"]로 검색한 네이버 화면으로 보여집니다.

원하는 echart 속성에 이벤트 생성하기

현재 이벤트는 차트의 시리즈(현재 위의 차트의 붉은색 막대바) 클릭하면 발생하는데 이를 원하는 지점만 클릭했을때 발생되는 것으로 변경할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

// DOM을 준비하고 echart 객체를 만듭니다.
var myChart = echarts.init(document.getElementById('click01'));

// 차트 속성과 데이터를 지정합니다.
var option = {
    title: {
        text: 'ECharts 클릭 이벤트!',
        triggerEvent: true,
    },
    tooltip: {},
    legend: {
        data:['Sales']
    },
    xAxis: {
        data: ["shirt","cardign","chiffon shirt","pants","heels","socks"],
        triggerEvent: true,
        axisLabel: {
        	//x축의 모든 데이터를 보여준다
            interval: 0,
        },
    },
    yAxis: {
    	triggerEvent: true,
    },
    series: [{
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        markLine:{
            data:[{yAxis: 12}],
            label: {show: false},
            symbol: 'none',
            lineStyle:{
                type: 'solid',
                color : '#eedd78',
                width : 5
            },
            triggerEvent: true,
        },
    }],
};

// 위에서 설정한 속성을 차트에 반영합니다.
myChart.setOption(option);

//클릭 이벤트를 생성합니다.
myChart.on('click', function (params) {
    if (params.componentType === 'markLine') {
        alert('markLine을 클릭하였습니다.');
    }
    else if (params.componentType === 'series') {
         alert('series를 클릭하였습니다.');
    }
    else if(params.componentType === 'xAxis'){
    	alert('xAxis 클릭하였습니다.');
    }
    else if(params.componentType === 'yAxis'){
    	alert('yAxis 클릭하였습니다.');
    }
    else if(params.componentType === 'title'){
    	alert('title 클릭하였습니다.');
    }
});

triggerEvent: true를 사용하면 이벤트를 원하는 속성에 부여할 수 있습니다.

두번째 만들어진 차트를 클릭하면 차트의 componentType을 직관적으로 알 수 있습니다. (legend 범례를 클릭하는 이벤트는 echart에서 기본적으로 설정된 이벤트 입니다.)

위의 알려드린것을 바탕으로 하면 앞으로 차트에 이벤트를 생성하는 일이 쉽게 느껴질 것입니다!

Reference

Share