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。