微信小程序npm安装第三方包(引用第三方插件avtv f2.js)
发布时间:2020-12-14 19:21:47 所属栏目:资源 来源:网络整理
导读:由于我要使用微信小程序引用图标插件,就以AntV F2插件为例; AntV F2官网: https://antv.alipay.com/zh-cn... 需要准备 : 微信开发工具(必须支持npm功能);? node.js安装;? npm基础知识; 以下操作是node.js已经安装过了。 1、先建好小程序模版。 比如
由于我要使用微信小程序引用图标插件,就以AntV F2插件为例; AntV F2官网:https://antv.alipay.com/zh-cn... 需要准备:微信开发工具(必须支持npm功能);? 以下操作是node.js已经安装过了。 1、先建好小程序模版。比如下图: 然后使用dos命令打开这个当前的文件夹。比如下图: 2、初始化指令如果是该文件夹第一次使用:?请先使用指令npm init(初始化指令); 如下图: 如果出现这种情况就对了,进行对这个文件夹进行编辑,也可以全部点击回车键,一路回车; 3、再次安装npm install --production建议使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小 4、安装微信小程序 F2 图表组件*npm i @antv/f2-canvas 恭喜你,操作完以上这几步已经安装好依赖包。 5、安装好依赖包之后,打开微信开发工具点击开发者工具顶部详情,勾选 使用npm模块,再点击菜单栏中工具下的构建npm即可运行
恭喜自己吧,npm安装第三方包已经完成; 以下就是在小程序中代码的撰写: 1.index.json;
2.index.wxml;
3.index.wxss;
4.index.js;let chart = null;
function initChart(canvas,width,height,F2) {
const data = [
{ year: '1951 年',sales: 38 },{ '1952 年',128);">52 },68);">'1956 年',128);">61 },68);">'1957 年',128);">145 },68);">'1958 年',128);">48 },68);">'1959 年',68);">'1960 年',68);">'1962 年',];
chart = new F2.Chart({
el: canvas,height
});
chart.source(data,{
sales: {
tickCount: 5
}
});
chart.tooltip({
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');
chart.render();
return chart;
}
Page({
data: {
opts: {
onInit: initChart
}
},onLoad(){
},onReady() {
}
})
看右侧是不是已经出来柱形图了,如果需要做其他图表,去官网让选择就行了,官网的例子比较多,选择做自己需要的就行了。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |