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操作就一样了