共计 2654 个字符，预计需要花费 7 分钟才能阅读完成。
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() 创建页面时触发 1ionViewDidLoad() 当页面加载时触发 2ionViewWillEnter() 当将要进入页面时触发 3ionViewDidEnter() 进入页面时触发 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;
}
}
