关于taro:Taro-使用-最新-F2-4x-版本图表

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