使用 ECharts 與 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 項目 。
來自：http://zhangwenli.com/blog/2017/08/29/echarts-with-ionic/