如何在小程序中引入Antv的F2可视化方案？

黑土豆
1,980 阅读7分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

最近人有点疲乏，做什么事都提不起兴趣，不知是天气燥热的缘故，还是想休息休息，总之就是有点emo了。哎，尽管情绪不是很高涨，但是生活还是要过，人还是要向前看，毕竟还有一大堆的工作和责任要去履行。

背景

还是老规矩，先说背景：最近在开发钉钉小程序项目，其中需求需要在小程序里面实现一个环形进度条效果，讲道理这个需求不是特别过分，按照以往的性子那就是有则不做无则封装，但是这次由于最近人困马乏的缘故，不想自己去动手实现，但不实现又交不了差。那用何交差？那就是用别人写好的组件，这次选用的antv的F2，这是一次全新的尝试。

为什么这么说呢？之前都是开发微信小程序并且溜熟，而这次是第一次开发阿里系的小程序，所以有一些插件还是决定选择阿里系相关的插件，毕竟本是同根生，不会太相煎。这也是选用F2的原因，既然选择了那怎么在项目中使用，这就是这次要聊的主题了，即：如何在小程序项目中引入F2可视化方案？

看看设计图，就知道是个怎样的效果了，如下：

image.png

引用方式

这里的引用方式还是分阿里系小程序和微信小程序来介绍，毕竟厂家不同，使用方法也有所不同。但亲自上手体验之后，你会发现区别也不大，具体操作请看下面→

阿里系小程序

首先项目初始化出来是没有package.json文件的，所以需要新增package.json文件再安装F2，如下：

// 在小程序根目录打开cmd，输入命令：
npm init

这样文件夹中就会出现一个package.json文件，这样我们就可以安装F2插件了。如下：

npm install @antv/my-f2 --save

插件安装好，那就是去使用它，在需要的页面的json文件中引入它即可。如下：

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

如上操作结束之后就意味着该插件已经被引入进了页面了，接下来就是在axml文件页面中创建。如下：

<view class="circle-progress">
  <view class="f2-chart">    
    <f2 onInit="onInitChart" opts="{{y: 80,  text: `83%\n考勤率`}}"></f2>
  </view>
</view>

设置样式，如下：

.f2-chart {
  width: 200rpx;
  height: 200rpx;
}

编写逻辑代码，如下：

Page({
  data: {
    scale: 6 // 圆环宽度
  },
  onLoad() {},

  // 图表初始化
  onInitChart (F2, config,optsData) {
    let sizeSCale = this.data.scale;
 
    const chart = new F2.Chart(config);
    const data = [{ x: '1', y:  optsData.props.opts.y }];
    chart.source(data, {
        y: {
            max: 100,
            min: 0
        }
    });
    chart.axis(false);
    chart.tooltip(false);
    chart.coord('polar', {
        transposed: true,
        innerRadius: 0.8,
        radius: 1
    });
    chart.guide().arc({
        start: [0, 0],
        end: [1, 99.98],
        top: false,
        style: {
            lineWidth: sizeSCale,
            stroke: '#AEEFC9' // 圆环浅色部分
        }
    });
    chart.guide().text({   
        position: ['50%', '50%'],
        content: optsData.props.opts.text,
        style: {
            fontSize: '9',
            fill: '#00CE56' // 字体颜色
        }
    });
    chart.interval()
        .color('#00CE56') // 进度数值颜色
        .position('x*y')
        .size(sizeSCale)
        .animate({
            appear: {
                duration: 500,
                easing: 'cubicIn'
            }
        });
    chart.render();
    return chart;
  }
});

这样设置完成之后，将会在页面看到F2实现的环形进度条效果，如下：

image.png

好啦，阿里系小程序引入F2插件的步骤和方法就介绍完成了，其实还是很简单的。如果按照上述的步骤一步步来，那你就会掌握如何在阿里系小程序中引入F2插件的方法了。

微信小程序

微信小程序安装组件，没有像阿里系小程序那么直接，安装引入就能使用。微信小程序在安装了组件后，需要去设置一下开发工具中的本地设置等操作才能使用，具体操作如下→

首先还是一样，项目在创建时也是没有package.json文件的，也需要手动去创建。如下：

// 在小程序根目录打开cmd，输入命令：
npm init

接着和阿里系小程序一样，那就是去安装项目所需要的的F2插件包。如下：

npm install @antv/my-f2 --save

再下来，那就是和阿里系小程序的区别了，也就是上面提到的需要去做一些设置才能成功使用到安装的F2插件包。如果你使用的微信开发者工具软件不是最新版本的，那就需要在开发工具的本地设置中将使用npm模块选项勾上，如下： image.png

但如果你使用的开发者工具是最新版本的，那就不需要做上面一步，因为最新版本中已没有上述选项，不用再手动勾选使用npm模块了，具体请点击查看该链接。

接着就需要点击开发者工具上的顶部菜单栏->工具->构建npm，这样页面就会显示正在构建并且在构建成功后展示具体信息。

image.png

点击确认即可。

然后就可以在微信小程序中创建你的F2图表了，具体的操作和阿里系小程序没啥区别，还是走一遍吧。

在json文件中引入插件：

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

在wxml文件中创建：

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

设置样式：

.f2-chart {
  width: 100%;
  height: 800rpx;
}

编写逻辑代码：

Page({
    data: {
      onInitChart(F2, config) {
        const chart = new F2.Chart(config);
        const data = [
          { value: 55, city: '分类一', date: '2022-05-29' },
          { value: 66, city: '分类二', date: '2022-05-29' },
          { value: 77, city: '分类三', date: '2022-05-29' },
          { value: 33, city: '分类一', date: '2022-05-30' },
          { value: 45, city: '分类二', date: '2022-05-30' },
          { value: 88, city: '分类三', date: '2022-05-30' },
          { value: 62, city: '分类一', date: '2022-05-31' },
          { value: 74, city: '分类二', date: '2022-05-31' },
          { value: 51, city: '分类三', date: '2022-05-31' },
        ];
        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;
      }
    },
});

就这样，环形进度条效果就出来了。

image.png

好了，微信小程序引入F2插件的步骤和方法也介绍完了，如果跟着我的步骤来，一定没有问题的，因为这是经过我测试和印证的。最后说一下需要注意的：那就是在使用图表时，一定要设置容器宽高，不然将会是一片白，没有图表信息显示出来。

好了，如何在小程序中引入F2插件的方法就介绍完了，希望你看了这篇文章之后，后续的工作遇到在小程序中使用可视化组件的问题而感到烦恼。不只是F2插件，小程序在需要使用其他插件时都可用上述的方法进行安装引入。

最后，xdm看文至此，点个赞👍再走呗，3Q^_^

往期精彩文章

后语

伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

avatar
文章
阅读
粉丝