前言
ionic3提供的组件已经相当丰富咯，但是事实上有些特殊的需求，比如使用百度地图，或者第三方插件echart报表插件是，就不能用传统的方式去使用第三方插件咯，如何在Ionic3项目中使用第三方JavaScript库?.其实特别简单啦，跟着我步伐前进吧。
使用步骤如下
环境安装
1, 安装ChartJs库
cd /项目的根目录下
npm install chart.js --save
2, 全局安装typings
npm install -g typings
3.找到自己的项目新建一个declarations.d.ts文件内容如下
declare module 'echarts'; //报表的插件申明
declare var BMap; //百度地图的申明
基本的环境配置到这里搞定了
代码实现
需求：效果图如下
1.gif
撸代码部分
百度地图的实现过程：
第一步去百度地图api控制台创建一个应用，链接地址如下
···
http://lbsyun.baidu.com/apiconsole/key
···
TIM图片20170830192926.png
第二步找到自己的ionic3项目下的index.html引用如下脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥哦">模板页面
<ion-header>
<ion-navbar color="primary">
<ion-title>百度地图的使用</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div id="hjmap" #hjmap></div>
</ion-content>
js脚本
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* 百度地图的调用说明
* @by weijb
*/
@IonicPage({
name: 'baiduMap-page'
})
@Component({
selector: 'page-baidu-map',
templateUrl: 'baidu-map.html',
})
export class BaiduMapPage {
@ViewChild('hjmap') mapElement: ElementRef;
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
let map = new BMap.Map(this.mapElement.nativeElement, {
enableMapClick: true
}); //创建地图实例
map.enableScrollWheelZoom(); //启动滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //连续缩放效果，默认禁用
let point = new BMap.Point(118.06, 24.27); //坐标可以通过百度地图坐标拾取器获取
map.centerAndZoom(point, 8); //设置中心和地图显示级别
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "厦门东软慧聚科技有限公司" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址：北京东软慧聚科技有限公司", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
}
}
echart报表的使用
模板部分
<ion-header>
<ion-navbar color="primary">
<ion-title>报表中心 </ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div id="hjcenter" #hjcenter></div>
</ion-content>
代码部分
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import echarts from 'echarts';
/**
*报表中心的使用
* by weijinbo
*/
@IonicPage({
name: 'hj-echart-page'
})
@Component({
selector: 'page-hj-echart',
templateUrl: 'hj-echart.html',
})
export class HjEchartPage {
@ViewChild('hjcenter') mapElement: ElementRef;
myChart: any;
data = {
"invoicedAmount": 1000,
"noTaxTotalAmount": 3386.05,
"purchasingOrgCode": 2200,
"unbilledAmount": 900,
"undeliveredAmount": 3386.05
};
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
this.myChart = echarts.init(this.mapElement.nativeElement);
this.init(this.data);
}
init(data) {
var option = {
tooltip: {
trigger: 'item',
// 饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
formatter: "{b} :<br/> {c} ({d}%)"
},
// 颜色
color: ['#30d5c4', '#f9cb42', '#f46f70'],
// 展示区
// 双层饼图：使得拥有inner和outter
series: [{
type: 'pie',
// 半径
radius: '45%',
// 圆心坐标
center: ['50%', '40%'],
// 样式
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
formatter: '{d} %'
}
}
},
data: [{
value: data.undeliveredAmount,
name: "未交货"
},
{
value: data.unbilledAmount,
name: "已交货未开票"
},
{
value: data.invoicedAmount,
name: "已开票"
}
],
},
{
type: 'pie',
radius: '45%',
// 圆心坐标
center: ['50%', '40%'],
// 样式
itemStyle: {
normal: {
label: {
show: true,
position: 'outter',
formatter: '{c}'
}
}
},
data: [{
value: data.undeliveredAmount,
name: "未交货"
},
{
value: data.unbilledAmount,
name: "已交货未开票"
},
{
value: data.invoicedAmount,
name: "已开票"
}
],
}
]
};
this.myChart.setOption(option);
}
}
总结
完成以上功能遇到最大的坑就是环境问题，被整死了好几次，结果还好没有被整死，公司网络也不给力，cnpm 下载丢包严重。否则这些功能不应该会花费这么长时间，哎哎哎。。。
如果觉得可以给个赞咯~-~
作者：薪火设计
链接：https://www.jianshu.com/p/0343e40bf411
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。