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

Posted telwanggs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

以上是关于ionic3引用外部插件--百度地图及echart报表的使用的主要内容,如果未能解决你的问题,请参考以下文章

ionic3 百度地图插件定位 问题

vue框架下echarts导入地图和调用百度地图接口

基于Echarts+百度地图+Three.js的数据可视化系统

记一次Echarts地图百度坐标使用

ionic3 应用内打开第三方地图导航 百度 高德

河南省三门峡百度echarts地图,大数据迁徙地图