天天看點
傳回

【轉】echarts象形柱圖——使用 ECharts 與 Ionic 建立原生應用

原文連結：https://efe.baidu.com/blog/echarts-with-ionic/

在這個教程中，我們将使用 Ionic 建立原生應用，并用 ECharts 建立餅圖和水球圖。Ionic 項目開發語言是 TypeScript，而 ECharts 的官方版本是基于 JavaScript 的，本教程将帶你輕松實作在 TypeScript 中建立 ECharts 圖表。

最終，我們将實作這樣的效果：

【轉】echarts象形柱圖——使用 ECharts 與 Ionic 建立原生應用

這篇教程将會教你：

  • 安裝 Ionic
  • 在 TypeScript 中使用 ECharts
  • 在 Ionic 項目中建立 ECharts 圖表
  • 在 Ionic 項目中建立 ECharts 水球圖

它不會教你：

  • ECharts 是什麼
  • Ionic 是什麼
  • Angular 是什麼
  • TypeScript 是什麼

建立 Ionic 項目

Ionic 官網有詳細的安裝教程，這裡我們簡單介紹一下我們的操作步驟。

首先，安裝全局的 Ionic 和 Cordova npm 包，前者是用來在指令行操作 Ionic 的，後者是提供從網頁到原生應用的底層支援的庫。

$ npm install -g ionic cordova

然後就可以建立項目了，我們的目前操作目錄在 

~/Workspace

，想建立一個名為 

pretty-charts

 的項目，執行：

$ ionic start pretty-charts

這樣就會自動下載下傳項目的模闆，并且一鍵安裝各種 npm 包之類的。是不是超簡單的！

現在，我們可以 

cd

 到 

pretty-charts

 目錄下運作項目。

$ cd pretty-charts
$ ionic serve

ionic serve

 會編譯你的代碼（什麼？你還沒寫？沒關系，模闆都幫你寫好了），并且起一個本地的伺服器，自動打開一個浏覽器運作代碼。看到的效果類似這樣：

【轉】echarts象形柱圖——使用 ECharts 與 Ionic 建立原生應用

目前 Ionic 3 的運作需要 Node 6.0+，可以通過 nvm 安裝并切換 Node 版本。

首先運作 

node -v

  檢視 Node 版本，如果不是 6.0+，可以運作 

npm i -g nvm; nvm install 6; nvm use 6

 。

在 TypeScript 中引入 ECharts

之前我有寫過一篇教程介紹如何用 typings 1.x 在 TypeScript 中引入 ECharts，想了解原理的可以參考這篇教程。下面我們使用的方法是基于 typings 2.x 的。

首先我們安裝 typings 庫，以及 ECharts：

npm install typings echarts --global

然後，安裝 ECharts 的 TypeScript 定義檔案，這個檔案來自社群貢獻。

npm install @types/echarts --save

現在，我們可以在 TypeScript 檔案中通路 ECharts 庫了：

import * as echarts from 'echarts';

typings 實際上是為 JavaScript 的庫提供了一個接口聲明的作用，有點類似 C++ 的頭檔案的意思，但不對其作檢查。具體來說，我們剛才下載下傳的檔案來自 DefinitelyTyped/types/echarts/index.d.ts，但是這個接口是否和 ECharts 吻合是不會有東西去檢查的。

比如我們在項目的 

src/pages/home.ts

 中，引入并使用 ECharts，可以發現 

echarts

 這個變量是正确能通路的，但是如果我們通路 

echarts.version

 的話，就會編譯報錯。

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
    console.log(echarts); // This is ok
    console.log(echarts.version); // Compile-time error
  }
}

這是因為在 typings 定義的檔案中，不存在 version 這個變量。而我們安裝的目前版本的 ECharts 3.7.0 其實是有這個變量的，是以這是 TypeScript 編譯器的誤報。

對于這種情況，我們可以提 Pull Request，或者用這樣的方式讓 TypeScript 不對 ECharts 做類型檢查：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
    const ec = echarts as any;
    console.log(ec.version); // '3.7.0'
  }
}

現在，你就可以按一般使用 ECharts 的方法使用它了。

初始化圖表

我們在 

home.html

 中建立一個 DIV 元素作為圖表的容器：

<ion-content>
  <div id="chart"></div>
</ion-content>

在 

home.scss

 中将其 CSS 設為：

page-home {
    #chart {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

但是，我們不能在 

HomePage

 的構造函數中初始化圖表，因為這時候頁面還沒有建構， 

document.getElementById('chart')

 傳回的是 

null

。

正确的做法是，在 

ionViewDidEnter

 這個 Ionic 特定的函數中初始化圖表，它将在進入這個頁面後調用。這時候頁面中已經有這個 DIV 并且正确的寬高了。整個 

home.ts

 檔案是這樣的：

import { Component } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor() {
  }
  ionViewDidEnter() {
    const ec = echarts as any;
    const container = document.getElementById('chart');
    console.log(container.offsetWidth, container.offsetHeight);
  }
}

現在，我們可以建立一個餅圖了：

const ec = echarts as any;
const container = document.getElementById('chart');
const chart = ec.init(container);
chart.setOption({
    series: {
        type: 'pie',
        data: [{
            name: 'A',
            value: 10
        }, {
            name: 'B',
            value: 20
        }, {
            name: 'C',
            value: 30
        }]
    }
});

運作結果：

【轉】echarts象形柱圖——使用 ECharts 與 Ionic 建立原生應用

使用水球圖

ECharts 水球圖是作為擴充存在的，是以不在 ECharts 項目中，但是使用起來也是意外地簡單呢！

首先，我們使用 npm 安裝：

npm install --save echarts-liquidfill

代碼如下：

import { Component } from '@angular/core';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor() {
  }
  ionViewDidEnter() {
    const ec = echarts as any;
    const container = document.getElementById('chart');

    const chart = ec.init(container);
    chart.setOption({
      series: {
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2]
      }
    });
  }
}

這樣就能得到水球圖啦！

【轉】echarts象形柱圖——使用 ECharts 與 Ionic 建立原生應用

是不是超簡單的？

如果我們再配置一下水球圖，就能得到更好玩的結果啦：

【轉】echarts象形柱圖——使用 ECharts 與 Ionic 建立原生應用

圖示來自 www.flaticon.com 的 Freepik，基于 CC 3.0 BY 釋出。

這裡，我們使用 SVG Path 定義了水球圖的形狀，并且在 HTML 中加入瓶子的圖檔，就能得到一個奶瓶啦！完整代碼請參見 GitHub 項目。

是不是很酷呢？

自留Mark echarts 象形圖 擴充 ionic
上一篇: 【轉】oracle之spool詳細使用總結
下一篇: 【轉】分布式架構的前世今生...分布式架構的前世今生...

繼續閱讀