博客

在移动端使用antV F2图表入门介绍

1.通过npm安装

npm install @antv/f2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

const F2 = require('@antv/f2');

2.通过引用在线js

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>

我是通过引用在线js搭配js和vue.js使用antV F2

以柱状图为例，首先我们需要创建一个canvas，然后进行图表绘制

<canvas id="myChart" width:"400" height="260"></canvas>

a).首先准备好数据源，json数组

data:[
  { genre: '测试数据一', sold: 100},
  { genre: '测试数据二', sold: 200 },
  { genre: '测试数据三', sold: 300 },
  { genre: '测试数据四', sold: 400 },
  { genre: '测试数据五', sold: 500 },
];

b).创建 Chart 对象

const chart = new F2.Chart({
  id: 'myChart',
  pixelRatio: window.devicePixelRatio, // 指定分辨率
});

c).载入数据源

chart.source(this.data);

d).创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴

chart
  .interval()
  .position('genre*sold')
  .color('genre');

e).渲染图表

chart.render();