vue antv f2使用实例

1.安装

前提：已经是可以运行的vue移动端项目。

移动到项目目录：

npm install @antv/f2 --save

2.引入

不需要在main.js中单独引入，哪个文件使用了就在哪个文件引入。

import F2 from "@antv/f2" //引入插件

3.使用

创建新文件：pie.vue。并在router/index.js 路由中写入路径。

import Pie from '@/views/pie'

{
      path: '/pie',
      name: 'pie',
      component: Pie,
},

pie.vue页面完整实例：

<template lang="html">
 <div class="about">
   <canvas id="myChart" width="400" height="260"></canvas>
 </div>
</template>

<script>
import F2 from "@antv/f2" //引入插件
export default {
  name:'about',
  data(){
    return {
      data:[
         { genre: 'Sports', sold: 275 },
         { genre: 'Strategy', sold: 115 },
         { genre: 'Action', sold: 120 },
         { genre: 'Shooter', sold: 350 },
         { genre: 'Other', sold: 150 }
      ]
    }
  },
  methods:{
    drawChart(){
      // Step 1: 创建 Chart 对象
      const chart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio // 指定分辨率
      });
 
      // Step 2: 载入数据源
      console.log(this.data);
      chart.source(this.data);
 
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart.interval().position('genre*sold').color('genre');
 
      // Step 4: 渲染图表
      chart.render();
    }
  },
  mounted(){
    var v = this;
    this.$nextTick(()=>{
      v.drawChart();
    });
  },
  created(){
 
  }
}
</script>

备注：可能的错误

1.

TypeError: Cannot read property 'Chart' of undefined

写法错误导致的，有的博客写法这样：

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

这样就不行……