ionic3 reference external plug-ins - use Baidu maps and reports echart

Foreword

Components ionic3 provided already quite rich slightly, but the fact that some special needs, such as using Baidu map, or third-party plug echart reporting plug-in that can not be used traditional ways to use third-party plug-ins slightly, how to use Ionic3 project third-party JavaScript libraries? In fact, it is particularly simple, follow me right pace.

Use the following steps

Environment Installation

1, the installation ChartJs library
root directory cd / projects under

npm install chart.js --save 

2, the overall installation typings

    npm install -g typings

3. Find your own project to create a new document reads as follows declarations.d.ts

declare module 'echarts'; //报表的插件申明
declare var BMap; //百度地图的申明 

The basic configuration of the environment to get here

Code

Demand: Effect FIG follows

 

1.gif

Line and code section

Baidu map implementation process:

The first step to Baidu map api to create a console application, the following URLs

···
http://lbsyun.baidu.com/apiconsole/key
···

 

TIM picture 20170830192926.png

The second step index.html find their ionic3 projects under the following script references

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥哦">

Template page

<ion-header>
    <ion-navbar color="primary"> <ion-title>百度地图的使用</ion-title> </ion-navbar> </ion-header> <ion-content> <div id="hjmap" #hjmap></div> </ion-content> 

js script

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); //开启信息窗口 }); } } 

---

Use echart report

Templates section

<ion-header>
  <ion-navbar color="primary"> <ion-title>报表中心 </ion-title> </ion-navbar> </ion-header> <ion-content> <div id="hjcenter" #hjcenter></div> </ion-content> 

Code section

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); } } 

to sum up

完成以上功能遇到最大的坑就是环境问题，被整死了好几次，结果还好没有被整死，公司网络也不给力，cnpm 下载丢包严重。否则这些功能不应该会花费这么长时间，哎哎哎。。。
如果觉得可以给个赞咯~-~

Author: Passing design
link: https: //www.jianshu.com/p/0343e40bf411
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.