原文出处:https://blog.csdn.net/weixin_39461487/article/details/79147957
文章参考自:https://zhuanlan.zhihu.com/p/28902584 (这个很好, 但少了下面的第3步,出现“Cannot find module echarts”错误)
使用 Ionic 创建原生应用,并用 ECharts 创建饼图
1.安装 typings 库,以及 ECharts:
npm install typings echarts --global
2.安装 ECharts 的 TypeScript 定义文件,这个文件来自社区贡献 (注意:要在具体项目的目录下执行)
npm install @types/echarts --save
3. 有可能在引入ECharts 时报出错误ECharts 找不到 Cannot find module echarts ,则需要
npm install echarts --save (注意:要在具体项目的目录下执行)
现在,我们在要使用echarts的 TypeScript文件引入 ECharts 库了:
import * as echarts from 'echarts';
可以测试查看echarts的版本 本例编辑的是home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as echarts from 'echarts';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
console.log(echarts);
}
}
html: 显示图表
<ion-content padding>
<div id="chart"></div>
</ion-content>
.scss
如果不定义图表可能不会显示
page-home {
#chart{width: 100%;height: 100%;}
}
.ts
不能在 HomePage 的构造函数中初始化图表,因为这时候页面还没有构建, document.getElementById('chart') 返回的是 null。
export class HomePage {
constructor(public navCtrl: NavController) {
console.log(echarts);
}
ionViewDidEnter() {/*当进入页面时触发*/
const ec = echarts as any;
var myChart = ec.init(document.getElementById('chart'));
var optionchart = {
series: {
type: 'pie',
data: [{
name: 'A', value: 15
}, {
name: 'B', value: 20
}, {
name: 'C', value: 15
}]
}
};
myChart.setOption(optionchart);
}
}
显示页面: