原文鏈接：https://efe.baidu.com/blog/echarts-with-ionic/
在這個教程中，我們將使用 Ionic 創建原生應用，並用 ECharts 創建餅圖和水球圖。Ionic 項目開發語言是 TypeScript，而 ECharts 的官方版本是基於 JavaScript 的，本教程將帶你輕鬆實現在 TypeScript 中創建 ECharts 圖表。
最終，我們將實現這樣的效果：
這篇教程將會教你：
- 安裝 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 會編譯你的代碼（什麼？你還沒寫？沒關係，模板都幫你寫好了），並且起一個本地的服務器，自動打開一個瀏覽器運行代碼。看到的效果類似這樣：
目前 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 項目中，但是使用起來也是意外地簡單呢！
首先，我們使用 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]
}
});
}
}
|
這樣就能得到水球圖啦！
是不是超簡單的？
如果我們再配置一下水球圖，就能得到更好玩的結果啦：
圖標來自 www.flaticon.com 的 Freepik，基於 CC 3.0 BY 發佈。
這裏，我們使用 SVG Path 定義了水球圖的形狀，並且在 HTML 中加入瓶子的圖片，就能得到一個奶瓶啦！完整代碼請參見 GitHub 項目。
是不是很酷呢？