Ionic3+Viser圖表

我其實一開始是打算用百度的ECharts做ionic3的圖表，我的另一篇博客地址如下：

Ionic3 + ECharts圖表：https://blog.csdn.net/a1_a1_a/article/details/80104770

但是我想阿里會不會也有屬於自己的圖表工具，所以就發現了AntV也就有了這篇博客。

AntV 是螞蟻金服全新一代數據可視化解決方案AntV 是，致力於提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。

AntV官網：https://antv.alipay.com/zh-cn/index.html

Viser就是基於Viser（G2）封裝js庫

Viser官網：https://viserjs.github.io/

開發步驟：

1：下載viser-ng，因爲我這邊是ionic3項目，所以選用viser-ng。如果你開發react或者vue就選擇相對應的版本進行下載。

    運行：npm install viser-ng命令下載viser-ng

裏面有一些警告，不需要管，不是錯誤！！！只是說明viser-ng所對應的依賴版本。

2：在app.module.ts中加入如下代碼：

import { ViserModule } from 'viser-ng';

加入這兩個地方就好。

3：在html中加入如下代碼，我這邊對應的是home.html

<div>
  <v-chart [forceFit]="forceFit" [height]="height" [data]="data" [scale]="scale">
    <v-tooltip></v-tooltip>
    <v-axis></v-axis>
    <v-line position="year*value"></v-line>
    <v-point position="year*value" shape="circle"></v-point>
  </v-chart>
</div>

這些是用於顯示圖表。

4：在html所對應的ts中加入如下代碼，我這邊是home.html對應的home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

const data = [//這裏是圖表的數據
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const scale = [{
  dataKey: 'value',
  min: 0,
},{
  dataKey: 'year',
  min: 0,
  max: 1,
}];

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  forceFit: boolean= true;
  height: number = 400;
  data = data;
  scale = scale;
  constructor(public navCtrl: NavController) {
  }
}

5：運行ionic serve命令將會得到如下結果：

總結：這個viser圖表庫在運用的時候還是很簡單的，同時官方也提供了很多的demo，大家自己去官網尋找自己所需要的圖表。

如下圖是官方提供的demo：