ionic echarts引入和使用及報錯解決

1.項目中安裝echarts

cnpm install echarts --save

但是ionic項目依賴於angular和typeScript，所以再安裝ts支持包

cnpm install @types/echarts –save

官網給出的一段建議：
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護的，從 3.1.1 開始由官方 EFE 維護 npm 上 ECharts 和 zrender 的 package。
所以還得安裝zrender

cnpm install zrender

2.引入使用

• 在所需頁面的name.ts引入如下

import echarts from 'echarts';

• 使用如下

initCharts(){
  echarts.init(this.myCharts.nativeElement).setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]

  },true);
}

• 調用

constructor(public navCtrl: NavController, public navParams: NavParams) {
 console.log(echarts);
  this.initCharts();
}

• 頁面顯示

找到name.html定義一個呈現圖表的div如下

<ion-header>

  <ion-navbar>
    <ion-title>charts</ion-title>
  </ion-navbar>

</ion-header>
<ion-content padding>
// #charts通過ViewChild獲取dom節點
  <div class="charts" #charts>

  </div>
</ion-content>

• 在name.ts文件一如dom節點

 @ViewChild('charts') myCharts:ElementRef

• 運行ionic serve報錯如下圖

大概意思是說獲取不到dom節點，也就是我們展示地圖的那個div，打印了之後發現是null或者undefine。後面就打印了一下ionic頁面的生命週期，測試了一下ionic頁面的生命週期函數。

生命週期函數 觸發時刻 順序
constructor() 創建頁面時觸發 1
ionViewDidLoad() 當頁面加載時觸發 2
ionViewWillEnter() 當將要進入頁面時觸發 3
ionViewDidEnter() 進入頁面時觸發 4

在constructor() 和 ionViewDidLoad()initCharts()函數中是獲取不到dom節點的，因爲頁面還沒有加載完成，在ionViewWillEnter()和ionViewDidEnter()是能獲取到dom節點的，顧名思義只有當頁面加載完成時才能獲取到dom節點，所以再在頁面加載完成後的生命週期函數裏可以獲取到改爲

ionViewWillEnter(){
 
}

或

ionViewDidEnter(){
  this.initCharts();
}

運行ionic serve 完美解決

3.完整代碼示例

Charts.ts如下

import {Component, ElementRef, ViewChild} from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import echarts from 'echarts';

/**
 * Generated class for the ChartsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-charts',
  templateUrl: 'charts.html',
})
export class ChartsPage {
  @ViewChild('charts') myCharts:ElementRef

  constructor(public navCtrl: NavController, public navParams: NavParams) {
   console.log(echarts);

  }

  ionViewDidLoad() {
    // this.initCharts();
    console.log('ionViewDidLoad ChartsPage');
  }
  // ionViewDidEnter(){
  //   this.initCharts();
  // }
  ionViewWillEnter(){
    this.initCharts();
  }
  initCharts(){
    console.log(document.getElementById('charts'));
    echarts.init(this.myCharts.nativeElement).setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]

    },true);
  }

}

charts.html

<!--
  Generated template for the ChartsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>charts</ion-title>
  </ion-navbar>

</ion-header>



<ion-content padding>
  <div class="charts"  #charts>

  </div>
</ion-content>

charts.scss

page-charts {
  .charts{
    height: 500px;

  }

}