在微信小程序中使用AntV F2 入门（一）配置环境及第一个图表
原创在微信小程序中使用AntV F2 入门（一）配置环境及第一个图表
原创
逝水经年
修改于 2021-10-18 10:32:44
修改于 2021-10-18 10:32:44
在某度搜了搜，发现在微信小程序中使用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初始化
终端
新建终端
执行以下代码
npm init -y
运行截图
2.安装wx-f2
在终端输入以下代码并执行
npm install @antv/wx-f2 --save
运行截图
3.开启npm模块
image-20211017214905245.png
4.构建npm
在顶部菜单栏->工具->构建npm
构建npm
构建npm确认
点击确认即可。
5.创建你的第一个F2图表
index.json
{
"usingComponents": {
"f2": "@antv/wx-f2"
}
}index.html
<view class="container">
<f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>index.wxss（十分重要，一定要给宽高）
.f2-chart {
width: 100%;
height: 500rpx;
}index.js
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.快来官方文档改变你的第一个图表的样式吧！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读