1，官方文档链接
https://f2.antv.vision/zh/docs/tutorial/miniprogram/#gatsby-focus-wrapper
2，微信内的使用 （以下内容即为F2微信小程序内使用步骤，也可以直接移步到github观看
）
项目默认初始化出来的是没有package.json的，需要新增package.json后再安装
## 没有package.json时执行下面这段
## echo "{}" > package.json
npm install @antv/wx-f2 --save
安装好依赖包之后，点击工具顶部菜单栏的详情：
勾选“使用 npm 模块”选项：
最后点击开发者工具中的菜单栏：工具 --> 构建 npm 即可运行。
如果碰到 @babel/runtime 未找到npm包入口文件，直接忽略就行了，不影响使用（强迫症碍眼的话，手动删除node_modules/@babel/runtime目录）
rm -rf node_modules/@babel/runtime
{
"usingComponents": {
"f2": "@antv/wx-f2"
}
}
<view class="container">
<f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>
.f2-chart {
width: 100%;
height: 500rpx;
}
Page({
data: {
onInitChart(F2, config) {
const chart = new F2.Chart(config);
const data = [
{ value: 63.4, city: ‘New York‘, date: ‘2011-10-01‘ },
{ value: 62.7, city: ‘Alaska‘, date: ‘2011-10-01‘ },
{ value: 72.2, city: ‘Austin‘, date: ‘2011-10-01‘ },
{ value: 58, city: ‘New York‘, date: ‘2011-10-02‘ },
{ value: 59.9, city: ‘Alaska‘, date: ‘2011-10-02‘ },
{ value: 67.7, city: ‘Austin‘, date: ‘2011-10-02‘ },
{ value: 53.3, city: ‘New York‘, date: ‘2011-10-03‘ },
{ value: 59.1, city: ‘Alaska‘, date: ‘2011-10-03‘ },
{ value: 69.4, city: ‘Austin‘, date: ‘2011-10-03‘ },
];
chart.source(data, {
date: {
range: [0, 1],
type: ‘timeCat‘,
mask: ‘MM-DD‘
},
value: {
max: 300,
tickCount: 4
}
});
chart.area().position(‘date*value‘).color(‘city‘).adjust(‘stack‘);
chart.line().position(‘date*value‘).color(‘city‘).adjust(‘stack‘);
chart.render();
// 注意：需要把chart return 出来
return chart;
}
},
});
原文：https://www.cnblogs.com/shuihanxiao/p/14818688.html