前言
ionic3提供的組件已經(jīng)相當(dāng)豐富咯搭儒，但是事實(shí)上有些特殊的需求，比如使用百度地圖，或者第三方插件echart報(bào)表插件是丹泉，就不能用傳統(tǒng)的方式去使用第三方插件咯，如何在Ionic3項(xiàng)目中使用第三方JavaScript庫?.其實(shí)特別簡單啦鸭蛙，跟著我步伐前進(jìn)吧摹恨。
使用步驟如下
環(huán)境安裝
1, 安裝ChartJs庫
cd /項(xiàng)目的根目錄下
npm install chart.js --save
2, 全局安裝typings
npm install -g typings
3.找到自己的項(xiàng)目新建一個declarations.d.ts文件內(nèi)容如下
declare module 'echarts'; //報(bào)表的插件申明
declare var BMap; //百度地圖的申明
基本的環(huán)境配置到這里搞定了
代碼實(shí)現(xiàn)
需求：效果圖如下
1.gif
擼代碼部分
百度地圖的實(shí)現(xiàn)過程：
第一步去百度地圖api控制臺創(chuàng)建一個應(yīng)用，鏈接地址如下
···
http://lbsyun.baidu.com/apiconsole/key
···
TIM圖片20170830192926.png
第二步找到自己的ionic3項(xiàng)目下的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';
/**
* 百度地圖的調(diào)用說明
* @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
}); //創(chuàng)建地圖實(shí)例
map.enableScrollWheelZoom(); //啟動滾輪放大縮小娶视，默認(rèn)禁用
map.enableContinuousZoom(); //連續(xù)縮放效果晒哄，默認(rèn)禁用
let point = new BMap.Point(118.06, 24.27); //坐標(biāo)可以通過百度地圖坐標(biāo)拾取器獲取
map.centerAndZoom(point, 8); //設(shè)置中心和地圖顯示級別
var marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
var opts = {
width : 200, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "廈門東軟慧聚科技有限公司" , // 信息窗口標(biāo)題
enableMessage:true,//設(shè)置允許信息窗發(fā)送短息
message:"親耐滴，晚上一起吃個飯吧肪获？戳下面的鏈接看下地址喔~"
}
var infoWindow = new BMap.InfoWindow("地址：北京東軟慧聚科技有限公司", opts); // 創(chuàng)建信息窗口對象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //開啟信息窗口
});
}
}
echart報(bào)表的使用
模板部分
<ion-header>
<ion-navbar color="primary">
<ion-title>報(bào)表中心 </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';
/**
*報(bào)表中心的使用
* 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',
// 餅圖寝凌、雷達(dá)圖、儀表盤贪磺、漏斗圖: a（系列名稱）硫兰，b（數(shù)據(jù)項(xiàng)名稱），c（數(shù)值）, d（餅圖：百分比 | 雷達(dá)圖：指標(biāo)名稱）
formatter: "寒锚 :<br/> {c} (tj1rn37%)"
},
// 顏色
color: ['#30d5c4', '#f9cb42', '#f46f70'],
// 展示區(qū)
// 雙層餅圖：使得擁有inner和outter
series: [{
type: 'pie',
// 半徑
radius: '45%',
// 圓心坐標(biāo)
center: ['50%', '40%'],
// 樣式
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
formatter: 'thnfznz %'
}
}
},
data: [{
value: data.undeliveredAmount,
name: "未交貨"
},
{
value: data.unbilledAmount,
name: "已交貨未開票"
},
{
value: data.invoicedAmount,
name: "已開票"
}
],
},
{
type: 'pie',
radius: '45%',
// 圓心坐標(biāo)
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);
}
}
總結(jié)
完成以上功能遇到最大的坑就是環(huán)境問題劫映，被整死了好幾次，結(jié)果還好沒有被整死刹前，公司網(wǎng)絡(luò)也不給力泳赋，cnpm 下載丟包嚴(yán)重。否則這些功能不應(yīng)該會花費(fèi)這么長時間喇喉，哎哎哎祖今。。拣技。
如果覺得可以給個贊咯~-~
