antv-f2-react

use @antv/f2 in React

Usage no npm install needed!

<script type="module">
  import antvF2React from 'https://cdn.skypack.dev/antv-f2-react';
</script>

README

antv-f2-react

简单封装 @Antv/F2 以便在React中使用.

组件安装

$ npm i antv-f2-react -S
$ npm i antv-f2-react --save

组件使用

import React, { Component } from 'react';
import AntvF2React from "antv-f2-react";

const data = [
  { x: '1', y: 38 },
  { x: '2', y: 52 },
  { x: '3', y: 61 },
  { x: '4', y: 145 },
  { x: '5', y: 48 }
];

const Demo = AntvF2React((chart) => {
  chart.interval().position('x*y');
  chart.render();
});

React.render(
  <Demo
    width={this.state.width}
    height={this.state.height}
    data={data}
  />
);

属性说明

名称 类型 必填 默认值 描述
width number yes null 图表宽度
height number No null 图表高度
data arrayOf(object) yes null 数据源
configs any yes AntvF2React((chart, configs))中的参数