.項目中安裝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