微信小程序中绘制图表 （AntV F2 的使用）

1.安装小程序F2组件

npm i @antv/f2-canvas

2.安装好相关依赖包之后，使用微信开发者工具运行项目，点击开发者工具顶部详情，勾选 使用npm模块，再点击菜单栏中工具下的构建npm即可运行

3.index.json

 4.index.wxml

index.wxml 视图，使用 ff-canvas 组件，

其中 opts 是一个我们在 index.js 中定义的对象，必设属性，

它使得图表能够在页面加载后被初始化并设置，详见 index.js 中的使用

  <view class="myChart" wx:if="{{!(stationShow || showLimitSet || showAddCar || show || oilCarNameDialog || showPinCard || unbindDialog)}}">
     <ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}"></ff-canvas>
  </view>

 5.index.wxss

.echarts_container .myChart {
  width: 100%;
  flex: 1;
  position: relative;
}

6.index.js

const initChart = async (canvas, width, height, F2) => { // 使用 F2 绘制图表
  if (!accountOilId) return false
  const params = {
    payStartTime,
    payEndTime,
    accountOilId
  }
  const res = await orderSummaryWithOilCard(params)
  if (res.code !== 200) return false
  const result = res.result || []
  const data = []
  result.forEach(item => {
    data.push({
      date: item.day,
      value: item.amountBalance,
      type: '加油金额'
    })
    data.push({
      date: item.day,
      value: item.litre,
      type: '加油数量'
    })
  })
  chart = new F2.Chart({
    el: canvas,
    width: echartW,
    height: echartH,
    padding: [40, 'auto', 'auto']
  });

  chart.source(data, {
    date: {
      range: [0, 1],
      type: 'timeCat',
      mask: 'MM-DD'
    }
  });
  chart.legend('type', {
    position: 'bottom',
    align: 'center',
    marker: {
      symbol: 'square',
      radius: 6
    },
    nameStyle: {
      fontSize: '14'
    }
  });
  chart.tooltip({
    offsetX: 0, // x 方向的偏移
    offsetY: 30, // y 方向的偏移
    showXTip: true,
    showCrosshairs: true,
    background: {
      radius: 5,
      padding: [7, 10]
    },
    showItemMarker: false,
    layout: 'vertical'
  });
  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.area()
    .position('date*value')
    .color('type', ['#FF9F67', '#6FBAFF'])
    .shape('smooth')
  chart.line()
    .position('date*value')
    .color('type', ['#FF9F67', '#6FBAFF'])
    .shape('smooth')
  chart.render();
  return chart;
}
Page({
    data: {
        opts: {
          onInit: initChart
        },
    }
})

参考：

微信小程序中AntV F2的使用_miracle__Y的博客-CSDN博客_antv f2 微信小程序

F2 移动端可视化引擎 | AntV

Axis · 语雀

层叠面积图 | F2

备注：安卓系统下，用 F2 图表 放在swiper组件中 ，导致 图表的 Tooltip 插件 点击没反应（避免放在swiper组件中）