vue 使用 antv/f2 饼状图 柱状图 npm install @antv/f2 --save

1.安装 详情参照（https://f2.antv.vision/zh/examples/pie/basic#pie-click）

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

移动到项目目录：

npm install @antv/f2 --save

2.引入// 直接上代码 自己借鉴文档 使用

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

<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: [
        { name: '芳华', percent: 0.4, a: '1' },
        { name: '妖猫传', percent: 0.2, a: '1' },
        { name: '机器之血', percent: 0.18, a: '1' },
        { name: '心理罪', percent: 0.15, a: '1' },
        { name: '寻梦环游记', percent: 0.05, a: '1' },
        { name: '其他', percent: 0.02, a: '1' }
      ]
    }
  },
  methods: {
    drawChart () {
      // Step 1: 创建 Chart 对象
      const chart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio // 指定分辨率
      })
      // Step 2: 载入数据源
      chart.source(this.data)
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴  marker 方形圆形显示
      chart.legend({
        position: 'right',
        marker: {
          symbol: 'square'
        }
      })
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.3, // 中间空心
        radius: 0.85
      })
      chart.axis(false)
      chart.interval()
          .position('a*percent')
          .color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ])
          .adjust('stack')
          .style({
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round'
          })
      chart.render()
    }
  },
  mounted () {
    var v = this
    this.$nextTick(() => {
      v.drawChart()
    })
  },
  created () {

  }
}
</script>
<style>
/**
 * 微博：艾米的猫儿
 * 趁时光不老，努力活成自己想要的样子
 * wechat/qq：731335498
 * */
</style>