Ionic2系列——在Ionic2中使用ECharts

在群里看到有人问怎么在Ionic2中集成ECharts来显示图表。当时答应说写个blog,简单写下步骤。

 

在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话TypeScript是认不出来的,无法编译通过。下面以百度的ECharts图表为例,演示一下使用第三方库的用法。

 

1、安装ECharts

首先需要使用npm安装ECharts,输入以下命令:

 

npm install echarts --save

安装完毕后可以看到node_modules目录下多了echarts目录。

 

因为TypeScript使用了静态类型,所以我们需要描述将要使用并引入的功能。TypeScript通过类型定义来描述这些功能。实际上TypeScript团队已经包含了很多这样的类型定义,也可以通过NPM进行安装。所以试试看:

 

npm install @types/echarts --save

还真有,安装完毕后,可以看到node_modules/@types目录下多了一个echarts目录,打开里面的index.d.ts看下,可以看到里面定义了ECharts的接口,有了这个定义文件,TypeScript就可以识别ECharts的方法和参数了。

 

2、使用ECharts

首先需要在ion-content内放一个div,作为图表的容器:

   <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 350px;height:300px;" ></div>

打开页面的ts文件,将ECharts引入进来,在头部添加:

import ECharts from 'echarts';

在页面上放一个按钮,把click事件绑定到以下方法:

  createCharts() {
    var myChart = ECharts.init(document.getElementById('main') as HTMLDivElement);
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

 

代码从ECharts官网抄的,只是示例。

这样点击按钮后就可以生成了。但是有个小问题,如果在不同分辨率的移动设备上图表宽度无法自适应。所以需要再做一点改动。

3、自适应宽度的Directive

在src目录下添加directives目录,添加一个auto-fit-layout.ts文件,输入以下代码:

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
    selector: '[my-auto-fit-layout]'
})
export class AutoFitLayout {
    constructor(public element: ElementRef, public renderer: Renderer) {
        //因为ionic的默认padding宽度是16
        renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
    }
}

使用这个指令时,会获取当前窗口宽度,并设置指定div的宽度。将这个指令应用到图表的容器上:

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 350px;height:300px;" my-auto-fit-layout></div>

这样就可以在生成图表的时候自动适应当前容器的宽度了。

 

4、其他

如果找不到这个d.ts怎么办呢?也有办法,参考这个地址:

https://yanxiaodi.gitbooks.io/ionic2-guide/content/resources/third-party-libs.html

一种办法是自己写d.ts,也可以直接将第三方库声明出来,但是如果没有详细的d.ts的话就会失去TypeScript强类型的好处。所以一定不要忘了还有tsc --declaration my.ts这个命令,可以把js文件改后缀为ts,用这个命令生成一份d.ts。

 

posted @ 2016-12-20 16:30 yan_xiaodi 阅读(...) 评论(...) 编辑 收藏