.項(xiàng)目中安裝echarts

cnpm install echarts --save

但是ionic項(xiàng)目依賴于angular和typeScript，所以再安裝ts支持包

cnpm install @types/echarts –save

官網(wǎng)給出的一段建議：

在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護(hù)的，從 3.1.1 開始由官方 EFE 維護(hù) npm 上 ECharts 和 zrender 的 package。

所以還得安裝zrender

cnpm install zrender

2.引入使用

• 在所需頁(yè)面的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);
}

• 調(diào)用

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

• 頁(yè)面顯示

找到name.html定義一個(gè)呈現(xiàn)圖表的div如下

<ion-header>
 <ion-navbar>
 <ion-title>charts</ion-title>
 </ion-navbar>
</ion-header>
<ion-content padding>
// #charts通過(guò)ViewChild獲取dom節(jié)點(diǎn)
 <div class="charts" #charts>
 </div>
</ion-content>

• 在name.ts文件一如dom節(jié)點(diǎn)

@ViewChild('charts') myCharts:ElementRef

• 運(yùn)行ionic serve報(bào)錯(cuò)如下圖

大概意思是說(shuō)獲取不到dom節(jié)點(diǎn)，也就是我們展示地圖的那個(gè)div，打印了之后發(fā)現(xiàn)是null或者undefine。后面就打印了一下ionic頁(yè)面的生命周期，測(cè)試了一下ionic頁(yè)面的生命周期函數(shù)。

生命周期函數(shù) 觸發(fā)時(shí)刻 順序

constructor() 創(chuàng)建頁(yè)面時(shí)觸發(fā) 1

ionViewDidLoad() 當(dāng)頁(yè)面加載時(shí)觸發(fā) 2

ionViewWillEnter() 當(dāng)將要進(jìn)入頁(yè)面時(shí)觸發(fā) 3

ionViewDidEnter() 進(jìn)入頁(yè)面時(shí)觸發(fā) 4

在constructor() 和 ionViewDidLoad()initCharts()函數(shù)中是獲取不到dom節(jié)點(diǎn)的，因?yàn)轫?yè)面還沒(méi)有加載完成，在ionViewWillEnter()和ionViewDidEnter()是能獲取到dom節(jié)點(diǎn)的，顧名思義只有當(dāng)頁(yè)面加載完成時(shí)才能獲取到dom節(jié)點(diǎn)，所以再在頁(yè)面加載完成后的生命周期函數(shù)里可以獲取到改為

ionViewWillEnter(){
 
}

或

ionViewDidEnter(){
 this.initCharts();
}

運(yùn)行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