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：