微信小程序中AntV F2的使用

Myth丶恋晨 2021-07-24 19:30 755阅读 0赞

一.安装AntV F2

1.安装node.js

安装地址：[https://nodejs.org/zh-cn/download/][https_nodejs.org_zh-cn_download]

2.删除截图中的文件

![20210525142402241.png][]![20210525142425729.png][]3.在项目根目录下打开cmd,初始化package文件

npm init

直接回车到最后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

4.使用--production选项可以减少安装一些无用的npm包，可有效减少整个小程序的体积大小

npm install --production

5.安装小程序F2组件

npm i @antv/f2-canvas

安装完成之后我们的目录中会有node\_modules文件夹

![20210528150802133.png][]

7.安装完成之后到小程序开发工具中的本地设置里将使用npm模块勾选上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]

7.工具中的构建npm

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2][]

若出现图中的提示我们可以不用管它

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 3][]

构建成功之后我们的文件夹中会生成miniprogram\_npm文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 4][]

二.使用AntV F2

例1：层叠条形统计图

1.在使用josn中引入插件模板

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

2.在wxml中使用刚刚引用的插件模板

4.css

/**index.wxss**/
      .chart_cont {
        position: relative;
    
    	background: #f2f2f2;
     }
    
     #borkenLine{
        display: block;
    	width: 750rpx;
     	height:400rpx;
    }
    #borkenLine1{
      display: block;
    width: 750rpx;
     height:400rpx;
    }

如果没写高度就会报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 5][]

4.js

// index.js
    import F2 from '@antv/wx-f2';
    
    Page({
      data: {
    
      },
    
      onLoad() {
        this.lineChart();
        this.lineChart1()
      },
      /**
       * 折线图
       */
      lineChart() {
        /**动态交互时，通过调用传入新的data值*/
        const data = [{
            name: "田间观摩会",
            type: "已完成数",
            num: 2
          }, {
            name: "田间观摩会1",
            type: "已完成数",
            num: 1
          },
          {
            name: "田间观摩会2",
            type: "已完成数",
            num: 1
          },
          {
            name: "田间观摩会3",
            type: "已完成数",
            num: 1
          },
          {
            name: "田间观摩会",
            type: "未完成数",
            num: 2
          },
          {
            name: "田间观摩会1",
            type: "未完成数",
            num: 1
          },
          {
            name: "田间观摩会2",
            type: "未完成数",
            num: 1
          },
          {
            name: "田间观摩会3",
            type: "未完成数",
            num: 1
          }
        ]
        var that = this;
        /*在这里改变一下结构即可*/
        that.chartComponent = that.selectComponent('#borkenLine');
        that.chartComponent.init((canvas, width, height) => {
          const chart = new F2.Chart({
            el: canvas,
            width,
            height,
            animate: false
          });
          chart.source(data, {
            time: {
              type: 'timeCat',
              tickCount: 3,
              mask: 'hh:mm',
              range: [0, 1]
            },
            value: {
              tickCount: 3,
              formatter: function formatter(ivalue) {
                return ivalue + '%';
              }
            }
          });
          chart.coord({
            transposed: true
          });
          chart.axis('time', {
            line: null,
            label: function label(text, index, total) {
              var textCfg = {};
              if (index === 0) {
                textCfg.textAlign = 'left';
              } else if (index === total - 1) {
                textCfg.textAlign = 'right';
              }
              return textCfg;
            }
          });
          chart.axis('tem', {
            grid: function grid(text) {
              if (text === '0%') {
                return {
                  lineDash: null,
                  lineWidth: 1
                };
              }
            }
          });
          chart.legend({
            position: 'bottom',
            offsetY: -5
          });
       
    
          chart.interval()
            .position('name*num')
            .color('type')
            .adjust('stack');
          chart.render();
        })
      },
    
        /**
       * 折线图
       */
      lineChart1() {
        /**动态交互时，通过调用传入新的data值*/
        const data = [{
          date: '2017-06-05',
          value: 116
        }, {
          date: '2017-06-06',
          value: 129
        }, {
          date: '2017-06-07',
          value: 135
        }, {
          date: '2017-06-08',
          value: 86
        }, {
          date: '2017-06-09',
          value: 73
        }, {
          date: '2017-06-10',
          value: 85
        }, {
          date: '2017-06-11',
          value: 73
        }, {
          date: '2017-06-12',
          value: 68
        }, {
          date: '2017-06-13',
          value: 92
        }, {
          date: '2017-06-14',
          value: 130
        }, {
          date: '2017-06-15',
          value: 245
        }, {
          date: '2017-06-16',
          value: 139
        }, {
          date: '2017-06-17',
          value: 115
        }, {
          date: '2017-06-18',
          value: 111
        }, {
          date: '2017-06-19',
          value: 309
        }, {
          date: '2017-06-20',
          value: 206
        }, {
          date: '2017-06-21',
          value: 137
        }, {
          date: '2017-06-22',
          value: 128
        }, {
          date: '2017-06-23',
          value: 85
        }, {
          date: '2017-06-24',
          value: 94
        }, {
          date: '2017-06-25',
          value: 71
        }, {
          date: '2017-06-26',
          value: 106
        }, {
          date: '2017-06-27',
          value: 84
        }, {
          date: '2017-06-28',
          value: 93
        }, {
          date: '2017-06-29',
          value: 85
        }, {
          date: '2017-06-30',
          value: 73
        }, {
          date: '2017-07-01',
          value: 83
        }, {
          date: '2017-07-02',
          value: 125
        }, {
          date: '2017-07-03',
          value: 107
        }, {
          date: '2017-07-04',
          value: 82
        }, {
          date: '2017-07-05',
          value: 44
        }, {
          date: '2017-07-06',
          value: 72
        }, {
          date: '2017-07-07',
          value: 106
        }, {
          date: '2017-07-08',
          value: 107
        }, {
          date: '2017-07-09',
          value: 66
        }, {
          date: '2017-07-10',
          value: 91
        }, {
          date: '2017-07-11',
          value: 92
        }, {
          date: '2017-07-12',
          value: 113
        }, {
          date: '2017-07-13',
          value: 107
        }, {
          date: '2017-07-14',
          value: 131
        }, {
          date: '2017-07-15',
          value: 111
        }, {
          date: '2017-07-16',
          value: 64
        }, {
          date: '2017-07-17',
          value: 69
        }, {
          date: '2017-07-18',
          value: 88
        }, {
          date: '2017-07-19',
          value: 77
        }, {
          date: '2017-07-20',
          value: 83
        }, {
          date: '2017-07-21',
          value: 111
        }, {
          date: '2017-07-22',
          value: 57
        }, {
          date: '2017-07-23',
          value: 55
        }, {
          date: '2017-07-24',
          value: 60
        }];
        var that = this;
        /*在这里改变一下结构即可*/
        that.chartComponent = that.selectComponent('#borkenLine1');
        that.chartComponent.init((canvas, width, height) => {
          const chart = new F2.Chart({
            el: canvas,
            width,
            height,
            animate: false
          });
          chart.source(data, {
            value: {
              tickCount: 5,
              min: 0
            },
            date: {
              type: 'timeCat',
              range: [ 0, 1 ],
              tickCount: 3
            }
          });
          chart.tooltip({
            custom: true,
            showXTip: true,
            showYTip: true,
            snap: true,
            crosshairsType: 'xy',
            crosshairsStyle: {
              lineDash: [ 2 ]
            }
          });
          chart.axis('date', {
            label: function label(text, index, total) {
              const textCfg = {};
              if (index === 0) {
                textCfg.textAlign = 'left';
              } else if (index === total - 1) {
                textCfg.textAlign = 'right';
              }
              return textCfg;
            }
          });
          chart.line().position('date*value');
          chart.render();
          
        })
      },
    });

例2：层叠条形统计图

[https_nodejs.org_zh-cn_download]: https://nodejs.org/zh-cn/download/
[20210525142402241.png]: https://img-blog.csdnimg.cn/20210525142402241.png
[20210525142425729.png]: /images/20210724/439d717f1c6b4bde8d48ba25b52c8fba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/1e9f209c6db7414bbb4d29f045561bda.png
[20210528150802133.png]: /images/20210724/6f47acfd908144a1b6c46de67cdbad68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/33cdd709ad454bef871fcb9119f19390.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2]: /images/20210724/a420e9a7f9014caeae3792b2d8112280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 3]: /images/20210724/0d3667cc08fa41b1bd3b2e5b7ccd8f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 4]: /images/20210724/989cdaf46aeb4ebba9bb903dcccd6354.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 5]: /images/20210724/6ad84fba1a754552a59e1a5407dd26b2.png