@antv/component
Visualization components for AntV, based on [G](https://github.com/antvis/g) which is a flexible rendering engine for visualization.
[![build](https://github.com/antvis/component/actions/workflows/build.yml/badge.svg)](https://github.com/antvis/component/actions/workflows/build.yml)
[![Coverage Status](https://coveralls.io/repos/github/antvis/component/badge.svg?branch=master)](https://coveralls.io/github/antvis/component?branch=master)
[![npm Version](https://img.shields.io/npm/v/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)
[![npm Download](https://img.shields.io/npm/dm/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)
[![npm License](https://img.shields.io/npm/l/@antv/component.svg)](https://www.npmjs.com/package/@antv/component)
✨ Features
- Rich - Contains 20+ Visualization components, for AntV G2, G6, L7.
- Powerful - Each component has powerful abilities and flexible scalability.
- Well Design - Continuous optimization and iteration.
- Powerful Renderer - Based on the powerful renderer G, we can render the components using
Canvas
, SVG
or WebGL
with same code.
📦 Installation
$ npm install @antv/component
$ yarn add @antv/component
🔨 Getting Started
import { Canvas } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
import { Button } from '@antv/component';
// 1. New a canvas.
const canvas = new Canvas({
container: 'container',
width: 600,
height: 600,
renderer: new Renderer(),
});
// 2. Create a button with configure.
const button = new Button({
/* ... */
});
// 3. Append into G canvas.
canvas.appendChild(button);
// 4. Render.
canvas.render();
📎 Documents
📮 Contribution
$ git clone git@github.com:antvis/component.git
$ cd component
$ npm install
$ npm run dev
Then send a pull request on GitHub.
📄 License
MIT@AntV.