关于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