Ionic3+ECharts圖表

有一些人對於JavaScript與TypeScript的區分還不是很瞭解（大家可以自己去了解），我這邊就不多做闡述。

對於要在Ionic3這種TypeScript要使用JavaScript的第三方圖表庫的人來說可能是一個問題，我就在這簡單講解一下。

步驟：

1：在ECharts官網：http://echarts.baidu.com/index.html下載或在線定製下載官方提供的js文件

2：在ionic3項目的index.html文件中引入上一步下載的js文件

<script src="./assets/lib/echarts4.0.4/echarts.js"></script>

注意：在assets文件是與index.html文件是同級，ionic3項目中的所有文件到最後都以模塊的形式注入到index.html文件中。

注意：echarts.js文件引入的位置應該放在cordova.js的後面。

3：在你要插入圖表位置頁面對應的ts中要加入如下代碼，比如我是添加圖表到about頁面中所以我寫的位置爲about.ts文件。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var echarts;//設置echarts全局對象

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {
  @ViewChild('EchartsContent') container:ElementRef;//與html中div #container1對應
  EChart :any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {//當頁面加載的時候觸發，僅在頁面創建的時候觸發一次，如果被緩存了，那麼下次再打開這個頁面則不會觸發
    console.log('ionViewDidLoad AboutPage');
    var data = [];
    for (var i = 0; i <= 360; i++) {
      var t = i / 180 * Math.PI;
      var r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }

    let ctelement = this.container.nativeElement;
    this.EChart = echarts.init(ctelement);
    this.EChart.setOption({
      title: {
        text: '極座標雙數值軸'
      },
      legend: {
        data: ['line']
      },
      polar: {
        center: ['50%', '54%']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      angleAxis: {
        type: 'value',
        startAngle: 0
      },
      radiusAxis: {
        min: 0
      },
      series: [{
        coordinateSystem: 'polar',
        name: 'line',
        type: 'line',
        showSymbol: false,
        data: data
      }],
      animationDuration: 2000
    });

  }

}

4:在上一步所對應的頁面插入如下代碼，我這邊的頁面是about.html

<div #EchartsContent class="EchartsDiv"></div>

5：運行ionic serve命令

注意：對於這個問題，原因是你沒有將div張開，圖標已經加載了但是div得寬高都爲0，所以沒有辦法看到圖表顯示。

6：在對應的scss中加入如下代碼，我這邊對應的scss是about.scss

page-about {
  .EchartsDiv{
    width:100%;
    height:100%;
  }

}

最終的結果如下：

注意：如果要修改圖表的類型需要到官網找http://echarts.baidu.com/examples/

只需要修改ts中

Echart.setoption()中的代碼即可，至於setoption中的代碼如何的來可以在官方demo中複製。

只需要將option中的代碼複製到上述的ts中的Echart.setoption()方法內即可。

就能產生與代碼相對應的圖表了！！！

本文參考了ABC__D的博客：https://blog.csdn.net/ABC__D/article/details/74448783

注意：需要阿里金服所推出的圖表庫的請轉到我的另一篇博客：Ionic3+Viser圖表：https://blog.csdn.net/a1_a1_a/article/details/80106522