微信小程序+f2/wx-f2生成折线图-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43884155/article/details/107024850

参考文档：wx-f2
其它实现方式：f2-canvas

1、最终效果图
在这里插入图片描述

2、wx-f2 是 F2 提供的微信小程序图表组件，故需要微信小程序支持使用 npm 安装第三方依赖包。所以有相关的版本要求：

小程序基础库版本 2.7.0 或以上

开发者工具 1.02.1808300 或以上，小程序开始支持使用 npm 安装第三方包

在这里插入图片描述

3、小程序的项目根目录中，默认情况下是没有package.json文件的，所以首先我们需要在小程序项目根目录下通过命令行创建package.json文件

npm init --yes

其实：npm init 就可以创建一个package.json文件，但是会弹出很多问题，可以输入对应的内容，也可以直接enter回车使用默认值，回答所有的问题，最后输入yes就会生成package.json文件
如果嫌弃回答很多问题麻烦，可以直接输入npm init --yes 跳过所有问题，直接生成使用默认值的package.json文件
使用 npm init --yes 命令之后，会看到项目根目录中多出了package.json文件

4、使用命令行安装依赖包wx-f2

npm install @antv/wx-f2 --save

5、安装好依赖包之后，调试器会报错
在这里插入图片描述
6、点击工具顶部菜单栏中的详情，勾选“使用 npm 模块”选项

7、最后点击开发者工具中的菜单栏：工具 --> 构建 npm 即可运行

8、如果碰到 ‘@babel/runtime 未找到npm包入口文件’ 的报错，直接忽略就行了，不影响使用（强迫症碍眼的话，可以手动删除node_modules/@babel/runtime目录）

rm -rf node_modules/@babel/runtime

在这里插入图片描述

9、点击完成构建弹框中的确定按钮，到此为止，就可以开始使用自定义组件了

10、使用自定义组件

json文件，引入组件

{
   
  "usingComponents": {
   
    "f2": "@antv/wx-f2"
  }
}

wxml文件，使用组件

<view class="container">
  <f2 class="f2-chart" onInit="{
    {onInitChart}}" />
</view>

wxss文件，设置宽高

page {
   
  background-color: #fff;
}
.f2-chart {
   
  width: 100%;
  height: 500rpx;
}

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