AntV中F2在⼩程序中的使⽤
F2的⼩程序使⽤
1. F2简介及语法参照⽹址
2. F2的⼩程序图表⽰例参照
3. @antv/f2-canvas 模块为 F2 的⼩程序图表⾃定义组件，依赖于 @antv/wx-f2(F2
对于⼩程序进⾏的适配)，请直接使⽤ @antv/f2-canvas。
F2的⼩程序使⽤详解
此教程适⽤于初步了解⼩程序基础框架的⽤户
1. 创建标准⼩程序
2. 在项⽬根⽬录下，初始化创建package.json⽂件
npm init    /*此处如果直接使⽤官⽅npm install 可能会出现没有node_modules错误*/
3. 安装npm install --production
npm install --production    /*建议使⽤--production选项，可以减少安装⼀些业务⽆关的 npm 包，从⽽减少整个⼩程序包的⼤⼩*/ 4. 安装⼩程序 F2 图表组件
npm i @antv/f2-canvas
5. 安装好依赖包之后，运⾏**
点击开发者⼯具顶部详情，勾选使⽤npm模块，再点击菜单栏中⼯具下的构建npm即可运⾏
6. 开始绘制柱状图
xx.json 配置⽂件，引⼊ f2-canvas 组件，由于⼩程序组件名不允许包含数字，所以这⾥将其命名为 ff-canvas。
// index.json
{
"usingComponents":{
"ff-canvas":"@antv/f2-canvas"
}
}
xx.wxml 视图，使⽤ ff-canvas 组件，
其中 opts 是⼀个我们在 xx.js 中定义的对象，必设属性，
它使得图表能够在页⾯加载后被初始化并设置，详见 xx.js 中的使⽤
<!--index.wxml-->
<view class="container">
<ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>
xx.wxss 定义 ff-canvas 组件宽、⾼度
#column-dom{
height:100%;
}
x.js 逻辑处理，这⾥还需要引⼊F2⽤于绘制图表，结构如下，注意路径正确。
// index.js
import F2from'@antv/wx-f2';// 注：也可以不引⼊， initChart ⽅法已经将 F2 传⼊，如果需要引⼊，注意需要安装 @antv/wx-f2 依赖
let chart =null;
ant安装包function initChart(canvas, width, height,F2){// 使⽤ F2 绘制图表
const data =[
{ year:'1951 年', sales:38},
{ year:'1952 年', sales:52},
{ year:'1956 年', sales:61},
{ year:'1957 年', sales:145},
{ year:'1958 年', sales:48},
{ year:'1959 年', sales:38},
{ year:'1960 年', sales:38},
{ year:'1962 年', sales:38},
];
chart =new F2.Chart({
el: canvas,
width,
height
});
chart.source(data,{
sales:{
tickCount:5
}
});
showItemMarker:false,
onShow(ev){
const{ items }= ev;
items[0].name =null;
items[0].name = items[0].title;
items[0].value ='¥ '+ items[0].value;
}
});
chart.interval().position('year*sales');
return chart;
}
Page({
data:{
opts:{
onInit: initChart
}
},
onReady(){
}
});
7. Q1：如果报如下图错误，检查是否有在 .wxss ⽂件中为 ff-canvas 组件定义 width 和 height 样式属性，如没有，加上即可，如此
代码所⽰：
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}//这⾥是之前作者没有写到的本⼈探坑有这个
//可以不再app.wxss⾥⾯加这个，加这个会造成被绝对定位了可以只在xxx.wxss⾥加⼀个
.
container {
width:100%;
height:75upx;
}
//只加⾼和宽就可以了
x.js 逻辑处理，这⾥还需要引⼊F2⽤于绘制图表，结构如下，注意路径正确。
在官⽅给的api中有这个
const chart =new F2.Chart({
id:'container',
pixelRatio: window.devicePixelRatio
});
⽤的是这个window.devicePixelRatio会报错的
chart =new F2.Chart({
el: canvas,
width,
height
});
直接把官⽅实例上的那个改成这个就⾏了el就是initChart的第⼀个实参调⽤这个⽅法时已经把window.devicePixelRatio封装进initChart的实参⾥了
// index.js
import F2from'@antv/wx-f2';// 注：也可以不引⼊， initChart ⽅法已经将 F2 传⼊，如果需要引⼊，注意需要安装 @antv/wx-f2 依赖
let chart =null;
function initChart(canvas, width, height,F2){// 使⽤ F2 绘制图表
const data =[
{ year:'1951 年', sales:38},
{ year:'1952 年', sales:52},
{ year:'1956 年', sales:61},
{ year:'1957 年', sales:145},
{ year:'1958 年', sales:48},
{ year:'1959 年', sales:38},
{ year:'1960 年', sales:38},
{ year:'1962 年', sales:38},
];
chart =new F2.Chart({
el: canvas,
width,
height
});
chart.source(data,{
sales:{
tickCount:5
}
});
showItemMarker:false,
onShow(ev){
const{ items }= ev;
items[0].name =null;
items[0].name = items[0].title;
items[0].value ='¥ '+ items[0].value; }
});
chart.interval().position('year*sales');  der();
return chart;
}
Page({
data:{
opts:{
onInit: initChart
}
},
onReady(){
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。