ProgrammingEcharts

Echarts -실시간으로 움직이는 차트 만들기

Echarts, echart, echart 한글, echarts dynamic, echarts moving, 이차트, 이차트 움직이기

Echarts 실시간으로 움직이는 차트 만들기

지금까지 만든 차트들은 정적으로 움직임이 없는 차트들이 었지만, 실시간으로 데이터를 생성하여 차트가 움직이는 것처럼 보여질 수 있습니다.

실시간으로 움직이는 차트

동적으로 움직이는 차트를 만들기 위해서는 실 데이터를 계속 생성하고 이전의 데이터를 삭제하면 됩니다.
아래의 소스를 확인하여 간단하게 동적인 차트를 만들어 봅시다!

전체 소스

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

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

//chart의 설정을 정합니다.
var option = {
    title: {
        text: '수익 비율 확인',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }
    },
    legend: {
        data:['순수익', '총 수익']
    },
    dataZoom: {
        show: false,
        start: 0,
        end: 100
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            data: (function (){
                var now = new Date();
                var res = [];
                var len = 20;
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return res;
            })()
        },
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            name: '순수익',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
                formatter: '{value} %'
            },
        },
        {
            type: 'value',
            scale: true,
            name: '총 수익',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series: [
    	{
            name: '순수익',
            type: 'line',
            lineStyle:{
				color:'#2A265C' //line차트 색상 변경
			},
            smooth: true, //부드러운 line 표현
            yAxisIndex: 0, //yAxis 1번째 사용
            data: (function (){
                var res = [];
                var len = 0;
                while (len < 20) {
                    res.push((Math.random()*10 + 5).toFixed(1) - 0); //랜덤 데이터 생성
                    len++;
                }
                return res;
            })()
        },
        {
            name: '총 수익',
            type: 'bar',
            yAxisIndex: 1, //yAxis 2번째 사용
            itemStyle:{
				color:'#EEAD00' //bar 색상 변경
			},
            data: (function (){
                var res = [];
                var len = 20;
                while (len--) {
                    res.push(Math.round(Math.random() * 1000)); //랜덤 데이터 생성
                }
                return res;
            })()
        },
    ]
};

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

//데이터를 생성하고 삭제합니다.
setInterval(function (){
	//x축에 실시간 데이터 생성
    var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

    var data0 = option.series[0].data; //순수익 데이터
    var data1 = option.series[1].data; //총 수익 데이터

    //데이터의 가장 왼쪽 값을 제거
    data0.shift();
    //데이터의 가장 오른쪽 값을 추가
    data0.push(Math.round(Math.random() * 1000));
    data1.shift();
    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

	//x축에 시간 데이터 추가
    option.xAxis[0].data.shift();
    option.xAxis[0].data.push(axisData);

	//차트에 반영
    myChart.setOption(option);
}, 2100);

기본적으로 차트를 만드는 방법을 알고 싶으시다면 ECharts를 통해 5분안에 차트를 만들자!를 확인해 주시기 바랍니다.

차트를 움직이게 만드는 로직

핵심적으로 차트를 움직이게 하는 소스는 아래에 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
setInterval(function (){
	//x축에 실시간 데이터 생성
    var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

    var data0 = option.series[0].data; //순수익 데이터
    var data1 = option.series[1].data; //총 수익 데이터

    //데이터의 가장 왼쪽 값을 제거
    data0.shift();
    //데이터의 가장 오른쪽 값을 추가
    data0.push(Math.round(Math.random() * 1000));
    data1.shift();
    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

	//x축에 시간 데이터 추가
    option.xAxis[0].data.shift();
    option.xAxis[0].data.push(axisData);

	//차트에 반영
    myChart.setOption(option);
}, 2100);

아래의 setInterval 부분이 차트를 동적이게 움직이도록 하는 부분입니다.
좀 더 자세하게 설명하자면 option 안에 있는 데이터가 [3,5,6,7] 이라면 가장 앞에 값인 3을 삭제(shift)하고 새로운 값 10을 넣습니다(push).
그래서 데이터는 [5,6,7,10]으로 변경됩니다.

위의 과정을 계속 반복하면 데이터가 동적으로 움직이는 것으로 보일 수 있습니다.

Reference

Share