uniApp接入F2，主要支持微信小程序

F2支持微信小程序，开源库 https://github.com/antvis/wx-f2 https://github.com/antvis/f2-canvas

1、首先下载wx-f2项目

git clone https://github.com/antvis/wx-f2.git

2、克隆下来之后，进行编译项目，需要node环境

安装依赖

npm i

build dist文件

npm run build

查看package.json文件中的 build配置，最后执行cp脚本将f2依赖的代码拷贝到dist文件下的index.js文件中

npm run cp

3.在uniApp项目中创建wxcomponents文件夹

详细查看：https://uniapp.dcloud.io/frame?id=小程序组件支持

4.配置page.json

5.使用如下图

<template>
    <view class="chart-wrapper">
        <f2 :onInit="initChart"></f2>
    </view>
</template>
<script>
let data = [
            { genre: 'Sports', sold: 275 },
            { genre: 'Strategy', sold: 115 },
            { genre: 'Action', sold: 120 },
            { genre: 'Shooter', sold: 350 },
            { genre: 'Other', sold: 150 }
        ];
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        methods: {
            initChart(F2,config) {
                const chart = new F2.Chart(config)
                chart.source(data)
                chart.interval()
                        .position('genre*sold')
                        .color('genre')
                chart.render()
                return chart
            }
        }
    }
</script>
<style>
    .chart-wrapper {
        width: 100%;
        height: 250px;
    }
</style>