1.装置依赖

npm i @antv/f2 --save# 微信小程序npm i @antv/f2-wx --save

2.拷贝组件

将微信工具包(@antv/f2-wx)，拷贝进去，到src/components上面。
而后，在 app.config.js 外面，全局引入小程序组件。

usingComponents: {    "f2": "./components/f2-wx"},

批改f2-wx/index.js外面的onRender为render，同时改为非函数

  properties: {    render: {    // 改名      type: null,      value: ''    }  },  ...  var children = _this.data.render;  // 间接取值

3.编写图表组件

写一个 LineChart 图表，如下：

import React, {} from 'react'import {Chart, Interval, Axis} from '@antv/f2'const LineChart: React.FC<any> = (props) => {  const data = [    { genre: 'Sports', sold: 275 },    { genre: 'Strategy', sold: 115 },    { genre: 'Action', sold: 120 },    { genre: 'Shooter', sold: 350 },    { genre: 'Other', sold: 150 },  ];  return (    <Chart data={data}>      <Axis field="genre" />      <Axis field="sold" />      <Interval x="genre" y="sold" color="genre" />    </Chart>  )}export default LineChart

4.援用

import { ReactNode, FC } from 'react'import LineChart from './LineChart.tsx'const Home: FC<any> = () => {  return (    <f2 render={<LineChart />} />  )}export default Home

其余

当然，你能够再封装一个组件F2Chart，而后<F2Chart><LineChart/></F2Chart>这样去应用。

// F2Chart 组件import { ReactNode, FC } from 'react'interface F2chartProps {  children?: ReactNode}const F2chart: FC<F2chartProps> = ({children}) => {  return (    <f2 render={children} />  )}export default F2chart