Angular7如何動態重新整理Echarts圖表
阿新 • • 發佈:2018-11-21
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操作就一樣了