ionic3引用外部插件--百度地圖及echart報表的使用

前言

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
來源：簡書
簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。