在某度搜了搜，发现在微信小程序中使用F2的教程比较少，而且是比较模糊的，回想起自己第一次使用F2踩过的坑，故写下这一系列文章帮助有需要的读者快速入门。
一、环境说明
环境名 | 版本 |
|---|---|
微信开发者工具 | RC 1.05.2109131 |
Antv wx-F2 | 2.1.1 |
二、一些提示
官方github
https://github.com/antvis/wx-f2
官方说明
为了方便使用，我们封装了微信小程序的自定义组件，故需要微信小程序支持使用 npm 安装第三包。 重要：版本要求
- 小程序基础库版本 2.7.0 或以上
- 开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。
三、安装步骤
1.使用终端进行npm初始化
终端
新建终端执行以下代码
代码语言：txt复制 npm init -y
运行截图2.安装wx-f2
在终端输入以下代码并执行
npm install @antv/wx-f2 --save
运行截图3.开启npm模块
image-20211017214905245.png4.构建npm
在顶部菜单栏->工具->构建npm
构建npm
构建npm确认点击确认即可。
5.创建你的第一个F2图表
index.json
代码语言：txt复制 {
"usingComponents": {
"f2": "@antv/wx-f2"
}
}index.html
代码语言：txt复制 <view class="container">
<f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>index.wxss（十分重要，一定要给宽高）
代码语言：txt复制 .f2-chart {
width: 100%;
height: 500rpx;
}index.js
代码语言：txt复制 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;
}
},
});这样第一个图表就出来啦
第一个图表四、注意事项
1.如果你跟着我的步骤来，一定没有问题的，这是经过我测试的；
2.在使用图表时，一定一定要注意给宽高，如果没给，那界面将是白茫茫一片，不会有任何报错（如下图）；
没给宽高运行效果3.快来官方文档改变你的第一个图表的样式吧！
