Angular7如何動態刷新Echarts圖表

1 概述

• echarts是百度的開源圖表插件
• Angular中引入echarts網上教程很多
• Angular引入echarts，並使用動態刷新

2 安裝

請參考大神的博客：https://blog.csdn.net/qq_35321405/article/details/80340969

3 參考DEMO

• echarts官網的DEMO：http://www.echartsjs.com/examples/editor.html?c=dynamic-data2

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

setInterval(function () {
    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }
    // 需要獲取到echarts圖表實例
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

4 Anuglar動態刷新

（1）app.component.html

<div #myCharts echarts [options]="options"></div>

（2）app.component.ts

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
    @ViewChild('myCharts') myCharts: ElementRef;
    
    options;
    
    private timer;
    
    constructor(private es: NgxEchartsService){
        var data = [];
        var now = +new Date(1997, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data.push(this.randomData());
        }
        this.options =  {
            title: {
                text: '動態數據 + 時間坐標軸'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模擬數據',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };
    }
    
    ngOnInit() {
        this.timer = setInterval(function () {
            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }
            this.es.getInstanceByDom(this.myCharts.nativeElement).setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);
    }
    
    ngOnDestroy() {
    	if (this.timer) clearInterval(this.timer);
	}
    
    private randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }
}

5 總結

（1）獲取dom對象

• Js使用document.getElementById("#id")獲取dom元素
• Angular使用模板和@ViewChild("#id")獲取ElementRef，ElementRef.nativeElement就可以得到dom元素了

（2）獲取echarts實例對象

• Js使用了echarts.init方法返回了新的實例，實際上echarts.getInstanceByDom(dom對象)可以獲取一個已經實例化的echarts對象
• Angular注入NgxEchartsService服務，它等同於js的echarts，即它有getInstanceByDom方法，接下來和Js操作就一樣了