ionic3 使用echarts簡單舉例 (贊)

原文出處：https://blog.csdn.net/weixin_39461487/article/details/79147957

文章參考自：https://zhuanlan.zhihu.com/p/28902584 (這個很好, 但少了下面的第3步，出現“Cannot find module echarts”錯誤）

使用 Ionic 建立原生應用，并用 ECharts 建立餅圖

1.安裝 typings 庫，以及 ECharts：

npm install typings echarts --global
           

2.安裝 ECharts 的 TypeScript 定義檔案，這個檔案來自社群貢獻 (注意：要在具體項目的目錄下執行）

npm install @types/echarts --save
           

3. 有可能在引入ECharts 時報出錯誤ECharts 找不到 Cannot find module echarts ，則需要  

 npm install echarts --save         (注意：要在具體項目的目錄下執行）

現在，我們在要使用echarts的 TypeScript檔案引入 ECharts 庫了：

import * as echarts from 'echarts'; 
           

可以測試檢視echarts的版本 本例編輯的是home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as echarts from 'echarts';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
      console.log(echarts);
  }
}
           

html: 顯示圖表

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

.scss 

如果不定義圖表可能不會顯示

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

.ts 

不能在 HomePage 的構造函數中初始化圖表，因為這時候頁面還沒有建構， document.getElementById('chart') 傳回的是 null。

export class HomePage {
    constructor(public navCtrl: NavController) {
        console.log(echarts);
    }
    ionViewDidEnter() {/*當進入頁面時觸發*/
        const ec = echarts as any;
        var myChart = ec.init(document.getElementById('chart'));
        var optionchart = {
            series: {
                type: 'pie',
                data: [{
                    name: 'A', value: 15
                }, {
                    name: 'B', value: 20
                }, {
                    name: 'C', value: 15
                }]
            }
        };
        myChart.setOption(optionchart);
    }
}
           

顯示頁面：