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

1.安装依赖

文章使用的版本：Taro: 3.5.6，f2: 4.0.34

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

2.拷贝组件

将微信组件node_modules/@antv/f2-wx/lib/*，拷贝出来，到src/components/f2-wx/下面。

然后，在 app.config.js 里面，全局引入小程序组件。

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

修改src/components/f2-wx/index.js里面的onRender为render，同时直接取值。（一共有三处）

  properties: {
    /** onRender: {
      type: null,
      value: () => {},
    }, **/
    render: {    // 改名
      type: null,
      value: ''  // 改为值
    }
  },

  ...

  /** var children = this.data.onRender(this.data); **/
  var children = _this.data.render;  // 直接取值

  ...

  /** var children = data.onRender(data); **/
  var children = data.render;  // 直接取值

3.编写图表组件

写一个 LineChart 图表组件，函数式组件，如下：

import React, {} from 'react'
import {Chart, Interval, Axis, Tooltip} from '@antv/f2'

const LineChart = (props) => {
  return (
    <Chart data={props.data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Tooltip showTooltipMarker={true} /> 
      <Interval x="genre" y="sold" color="genre" />
    </Chart>
  )
}

export default LineChart

4.引用

引用组件，要在<f2 />外面写一个有明确宽高的View，不然显示不出来.
然后，通过@antv/f2里面的createElement引用。

import {useState} from 'react'
import { View, Text } from '@tarojs/components'
import { createElement } from '@antv/f2'
import LineChart from '../../components/LineChart'
import './index.scss'

const Index = () => {
  const [data, setData] = useState([
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ])
  setTimeout(() => {
    setData([
      { genre: 'Sports', sold: 75 },
      { genre: 'Strategy', sold: 15 },
      { genre: 'Action', sold: 320 },
      { genre: 'Shooter', sold: 150 },
      { genre: 'Other', sold: 250 },
    ])
  }, 3000);
  return (
    <View className='index'>
      <Text>Hello world!</Text>
      <View style={{width: "100%", height: "500rpx"}}>
        <f2 render={createElement(LineChart, {data: data})} />
      </View>
    </View>
  )
}

export default Index