支付宝小程序中使用F2图表

支付宝小程序中使用F2图表

介绍

最近在支付宝小程序开发中接到显示图表的需求，因为支付宝小程序方未提供相关插件，并且目前支付宝小程序不支持document，所以根据推荐使用f2-canvas图表组件。
由于 f2-canvas 组件主要是对小程序的画布上下文和 html5 canvas 的上下文进行了适配以支持 F2 在小程序端的渲染，所以 F2 能绘制什么图表，小程序端就能绘制什么图表。语法也可以按照F2来。
F2 API：https://antv.alipay.com/zh-cn/f2/3.x/api/index.html

效果图

附上最近做的效果图：

f2-canvas在小程序中的使用步骤：（以折线图为例）

1. 小程序中安装依赖 ：npm install @antv/my-f2
2. .acss文件

canvas {
  width: 100%;
  height: 100%;
}

3. .axml文件

<canvas id="area" onTouchStart="touchStart" onTouchMove="touchMove" 
onTouchEnd="touchEnd" width="{{width}}" height="{{height}}" />

4. .js文件

 import F2 from '@antv/my-f2';
 const app = getApp();
 const api = require('/api/api/index.js')；
 Page({
  data: {
  },
  onLoad(options) {
  },
  onReady() {
    let me = this;
    // 折线图
    my.createSelectorQuery()
          .select('#area')
          .boundingClientRect()
          .exec((res) => {
            // 获取分辨率
            const pixelRatio = my.getSystemInfoSync().pixelRatio;
            // 获取画布实际宽高
            const canvasWidth = res[0].width;
            const canvasHeight = res[0].height;
            // 高清解决方案
            me.setData({
              width: canvasWidth * pixelRatio,
              height: canvasHeight * pixelRatio
            });
            const myCtx = my.createCanvasContext('area');
            myCtx.scale(pixelRatio, pixelRatio); //按照设置的分辨率进行放大
            const canvas = new F2.Renderer(myCtx);
            me.canvas = canvas;
            me.drawLineChart(canvas, res[0].width, res[0].height);
          });
  },
  // 折线
  drawLineChart(canvas, width, height) {
    let me = this;
    let url = api.generalSituationInfo;
    let params = {};
    let header = 'application/json';
    app.request(url, params, 'GET', header, true).then(res => {
      if (res.code == 0) {
        const data = res.data.dataList;  //折线图数据源
        const chart = new F2.Chart({
          el: canvas,
          width,
          height,
          padding: [10, 0, 60, 0]
        });
        chart.source(data, {
          hours: {
            tickCount: 5,  //x默认显示5个时间
          }
        });
        chart.axis('hours', {
          line: null,  //x轴线不显示
          label: function label(text, index, total) { //设置X轴字体颜色大小等
            const textCfg = {
              fill: '#ADCAEF',
              fontSize: 12
            };
            if (index === 0) {
              textCfg.textAlign = 'left';
            } else if (index === total - 1) {
              textCfg.textAlign = 'right';
            }
            return textCfg;
          }
        });
        chart.axis('number', {
          grid: null  //去掉网格线
        });
        chart.legend({  //设置图例样式位置等
          position: 'bottom',
          align: 'center',
          itemWidth: null,
          nameStyle: {
            fill: '#ADCAEF'
          },
        });
        chart.tooltip({  //设置提示信息的样式等
          crosshairsStyle: {
            stroke: 'white',
            lineWidth: 1
          },
          showCrosshairs: true,
          custom: true, // 自定义 tooltip 内容框
          onShow: function onShow(ev) {
            me.setData({
              currentHour: ev.items[0].title,
              hourCount: ev.items[0].value,
              weekDisplay: 'day'
            })
          }
        });
        chart.line()
          .position('hours*number')
          .color('type', function (type) {
            if (type === '今日访问数') {  //设置折线的颜色
              return 'white';
            }
            if (type === '昨日访问数') {
              return '#7EB0F8';
            }
          })
          .shape('smooth') 

        chart.render();
        return chart;
      }
    })
  },
  touchStart(e) {
    if (this.canvas) {
      this.canvas.emitEvent('touchstart', [e]);
    }
  },
  touchMove(e) {
    if (this.canvas) {
      this.canvas.emitEvent('touchmove', [e]);
    }
  },
  touchEnd(e) {
    if (this.canvas) {
      this.canvas.emitEvent('touchend', [e]);
    }
  }
});

5. 提供测试的json数据：（替换数据源data）

[{"hours":"01:00","number":0,"type":"今日访问数"},{"hours":"02:00","number":0,"type":"今日访问数"},{"hours":"03:00","number":0,"type":"今日访问数"},{"hours":"04:00","number":0,"type":"今日访问数"},{"hours":"05:00","number":0,"type":"今日访问数"},{"hours":"06:00","number":0,"type":"今日访问数"},{"hours":"07:00","number":4,"type":"今日访问数"},{"hours":"08:00","number":17,"type":"今日访问数"},{"hours":"09:00","number":7,"type":"今日访问数"},{"hours":"10:00","number":7,"type":"今日访问数"},{"hours":"11:00","number":6,"type":"今日访问数"},{"hours":"12:00","number":1,"type":"今日访问数"},{"hours":"13:00","number":0,"type":"今日访问数"},{"hours":"14:00","number":0,"type":"今日访问数"},{"hours":"15:00","number":0,"type":"今日访问数"},{"hours":"16:00","number":0,"type":"今日访问数"},{"hours":"17:00","number":0,"type":"今日访问数"},{"hours":"18:00","number":0,"type":"今日访问数"},{"hours":"19:00","number":0,"type":"今日访问数"},{"hours":"20:00","number":0,"type":"今日访问数"},{"hours":"21:00","number":0,"type":"今日访问数"},{"hours":"22:00","number":0,"type":"今日访问数"},{"hours":"23:00","number":0,"type":"今日访问数"},{"hours":"00:00","number":0,"type":"今日访问数"},{"hours":"01:00","number":0,"type":"昨日访问数"},{"hours":"02:00","number":0,"type":"昨日访问数"},{"hours":"03:00","number":0,"type":"昨日访问数"},{"hours":"04:00","number":0,"type":"昨日访问数"},{"hours":"05:00","number":0,"type":"昨日访问数"},{"hours":"06:00","number":0,"type":"昨日访问数"},{"hours":"07:00","number":4,"type":"昨日访问数"},{"hours":"08:00","number":17,"type":"昨日访问数"},{"hours":"09:00","number":5,"type":"昨日访问数"},{"hours":"10:00","number":6,"type":"昨日访问数"},{"hours":"11:00","number":6,"type":"昨日访问数"},{"hours":"12:00","number":19,"type":"昨日访问数"},{"hours":"13:00","number":18,"type":"昨日访问数"},{"hours":"14:00","number":4,"type":"昨日访问数"},{"hours":"15:00","number":15,"type":"昨日访问数"},{"hours":"16:00","number":8,"type":"昨日访问数"},{"hours":"17:00","number":18,"type":"昨日访问数"},{"hours":"18:00","number":33,"type":"昨日访问数"},{"hours":"19:00","number":12,"type":"昨日访问数"},{"hours":"20:00","number":5,"type":"昨日访问数"},{"hours":"21:00","number":2,"type":"昨日访问数"},{"hours":"22:00","number":0,"type":"昨日访问数"},{"hours":"23:00","number":0,"type":"昨日访问数"},{"hours":"00:00","number":0,"type":"昨日访问数"}]

*git地址：https://github.com/antvis/my-f2

组件形式：https://github.com/ant-mini-program/mini-chart