Taro 使用 最新 F2 4.x 版本图表

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 = (props) => {
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  return (
    
      
      
      
    
  )
}

export default LineChart

4.引用

import { ReactNode, FC } from 'react'
import LineChart from './LineChart.tsx'

const Home: FC = () => {

  return (
    } />
  )
}

export default Home

其他

当然，你可以再封装一个组件F2Chart，然后这样去使用。

// F2Chart 组件
import { ReactNode, FC } from 'react'

interface F2chartProps {
  children?: ReactNode
}
const F2chart: FC = ({children}) => {

  return (
    
  )
}

export default F2chart