1.0.3 • Published 4 years ago
@atana/g2plot v1.0.3
@opd/g2plot-react
G2Plot for React
Install
npm install @opd/g2plot-react
Usage
import React, { useCallback } from 'react'
import { LineChart } from '@opd/g2plot-react'
import { LineConfig } from '@antv/g2plot'
const config: LineConfig = {
height: 400,
title: {
visible: true,
text: '配置折线数据点样式',
},
description: {
visible: true,
text: '自定义配置趋势线上数据点的样式',
},
padding: 'auto',
forceFit: true,
xField: 'year',
yField: 'value',
label: {
visible: true,
type: 'point',
},
point: {
visible: true,
size: 5,
},
xAxis: {
tickCount: 10,
},
data: [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 11 },
],
}
export default () => {
const handleChartMount = useCallback(chart => {
console.log(chart)
}, [])
return <LineChart {...config} onMount={handleChartMount} />
}
API
All config defined in G2Plot
document can be used as props
Extra Props:
onMount
:(chart: Plot) => void
. triggered after chart render
Support Chart
LineChart
StepLineChart
ScatterChart
ColumnChart
HistogramChart
StackedColumnChart
RangeColumnChart
PercentStackedColumnChart
GroupedColumnChart
WaterfallChart
BarChart
StackedBarChart
RangeBarChart
PercentStackedBarChart
GroupedBarChart
AreaChart
DensityChart
StackedAreaChart
PercentStackedAreaChart
BubbleChart
PieChart
RingChart
RadarChart
GaugeChart
HeatmapChart
ProgressChart
RingProgressChart
TinyLineChart
TinyAreaChart
TinyColumnChart
FunnelChart
LiquidChart
OverlappedComboChart
RoseChart
WordCloudChart
BulletChart
TreemapChart
CalendarChart
DonutChart
StackedRoseChart
GroupedRoseChart
Develop
npm install
npm run build