最近需要在微信小程序中画折线图和柱状图，想到了之前用到的AntV F2，总的来说还不错。效果图可以用微信看simaQ老哥做的微信小程序Demo。本人没学过npm，甚至不知道npm是什么，所以有不对的地方还请各位指出。

AntV F2图表示例：https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html

simaQ做的小程序demo

于是参照了老哥的https://github.com/antvis/wx-f2资料，还有https://github.com/antvis/f2-canvas，中间也遇到了问题，都解决了。话不多说，上步骤。

demo效果图

1.创建微信小程序项目

注意不要创建中文的文件夹，应为npm安装的时候可能会报错。

2.在微信小程序的项目文件夹下打开cmd运行

npm init –f

初始化npm，就会生成一个package.json 有这个文件后才能执行install

-f表示force的意思，不加这个，npm会让你输入一堆信息，比如name、version之类，如果只是做做实验小demo，直接-f，npm帮你初始化package.json，并填充各种默认值，省事。

初始化过程中出现以下错误：code EINVALIDTAGNAME，可以注意下项目文件夹不能为中文

这段引自：https://segmentfault.com/q/1010000012930521

3.运行：npm install –production 安装依赖包

--save表示将安装的包加入依赖列表的意思，可以看下package.json 里的dependencies字段。后面再运行 npm install，就会把所有依赖安装下来。如果不加--save，什么都不会安装。

这段引自：https://segmentfault.com/q/1010000012930521

npm install –production

4.运行安装wx-antv/F2

npm install @antv/wx-f2 –save

5.安装f2-canvas组件

npm i @antv/f2-canvas

6.在微信小程序中设置使用npm模块

7.在微信小程序开发者环境中菜单中选择工具->构建npm，等待一会即可

8.修改index.json文件

index.json 配置文件，引入 f2-canvas 组件，由于微信小程序组件名不允许包含数字，所以这里将其命名为 ff-canvas

// index.json
{"usingComponents": {"ff-canvas": "@antv/f2-canvas"}
}

9.修改index.wxml文件

index.wxml 视图，使用 ff-canvas 组件，其中 opts 是一个我们在 index.js 中定义的对象，必设属性，它使得图表能够在页面加载后被初始化并设置，详见 index.js 中的使用。

<!--index.wxml-->
<view class="container"><ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>

10.index.wxss样式文件

/**index.wxss**/
.container{width: 100%;height: 600rpx
}
#column-dom{width: 100%;height: 600rpx
}

11.index.js文件

index.js 逻辑处理，这里还需要引入 F2 用于绘制图表，结构如下，注意路径正确。


//index.js
//获取应用实例const app = getApp();
const F2 = require('@antv/wx-f2');let chart = null;function initChart(canvas, width, height) { // 使用 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}});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: function () {}
})

运行肯定是可以的，注意细心就行。

02.微信小程序——AntV F2制作柱状图，折线图相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：wx-charts动态绘制折线图
微信小程序:wx-charts动态绘制折线图 wx-charts是基于 Canvas的微信小程序主流图表工具,体积小易操作,支持多种图表的绘制,这里主要就动态绘制折线图做出详解,所谓动态,指的是表格的 ...
微信小程序中使用Echarts（折线图）
一.微信中使用 Echars 直接在官网小程序使用Echarts中(文档-教程-在微信中使用Echarts),找到GitHub上的DEMO下载链接,官网有详细的使用步骤官网:http://echar ...
微信小程序Canvs画数据表格折线图
微信小程序Canvs画数据表格应设计要求,需要画个图标来显示用户历史数据的变化,所以就写了个方法,方便自己以后用的时候调用废话不多说,先上效果图现在.wxml文件中加入canvas 标签给他一 ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...

02.微信小程序——AntV F2制作柱状图，折线图