How to Integrate AntV/F2 and ECharts into Uni‑App for WeChat Mini‑Programs

Preface

This article explains how to use common H5 chart libraries (AntV/F2, ECharts) in WeChat mini‑programs by leveraging Uni‑App’s cross‑platform capabilities and the familiar Vue framework.

antv/f2

F2 3.x draws charts on a standard

CanvasRenderingContext2D

. In mini‑programs the provided

context

object is not a standard CanvasRenderingContext2D, so the core idea is to align the mini‑program

context

with the standard API. The f2‑context repository shows how to do this for Alipay and WeChat; the same approach works for other mini‑programs.

We create a new component

f2-uni.vue

under the

components

folder.

<code>&lt;template>
  &lt;canvas type="2d" class="f2-canvas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"&gt;&lt;/canvas&gt;
&lt;/template&gt;</code>

Set the canvas size:

<code>&lt;style lang="less"&gt;
.f2-canvas {
  width: 100%;
  height: 600rpx;
}
&lt;/style&gt;</code>

The component receives an

onInit

prop to obtain the F2 constructor and configuration object.

<code>props: {
  onInit: {
    type: Function,
    default: () => {}
  }
}</code>

During initialization we query the canvas node, adjust its pixel ratio, build the config, and invoke the provided

onInit

to create the chart:

<code>const query = uni.createSelectorQuery().in(this)
query.select('.f2-canvas')
  .fields({ node: true, size: true })
  .exec(res => {
    const { node, width, height } = res[0]
    const context = node.getContext('2d') // supported from WeChat base library 2.7.0
    const pixelRatio = uni.getSystemInfoSync().pixelRatio
    node.width = width * pixelRatio
    node.height = height * pixelRatio
    const config = { context, width, height, pixelRatio }
    const chart = this.onInit(F2, config)
    if (chart) {
      this.canvasEl = chart.get('el')
    }
  })</code>

Touch event wrappers forward events to the canvas element:

<code>function wrapEvent(e) {
  if (!e) return
  if (!e.preventDefault) {
    e.preventDefault = function() {}
  }
  return e
}

touchStart(e) {
  const canvasEl = this.canvasEl
  if (!canvasEl) return
  canvasEl.dispatchEvent('touchstart', wrapEvent(e))
}
</code>

After the component is ready, use it in a page:

<code>&lt;f2-uni class="f2-chart" :onInit="onInitChart"&gt;&lt;/f2-uni&gt;</code>

<code>methods: {
  onInitChart: (F2Constructor, config) => {
    const chart = new F2Constructor.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' },
      // ... more data points ...
    ]
    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()
    return chart // return the chart instance
  }
}
</code>

The chart renders correctly, as shown below:

This guide provides the basic idea; the actual wrapper can be further refined for flexibility.

echarts

The approach for ECharts is similar: adapt the mini‑program DOM selector and canvas context. You can refer to the DCloud community plugin “ECharts for Uni‑App” ( link ) and inspect its source code.

If you only target the WeChat mini‑program platform and conditional compilation is not effective, a pure version is available as a code snippet ( link ).

Illustrations: