|
1 | | -# g2plot-vue |
2 | | -g2plot for vue |
| 1 | +# @opd/g2plot-vue |
| 2 | + |
| 3 | +> [G2Plot](https://g2plot.antv.vision/) for React |
| 4 | +
|
| 5 | +[](https://github.com/open-data-plan/g2plot-vue/actions?query=workflow%3Abuild) |
| 6 | +[](https://www.npmjs.com/package/@opd/g2plot-vue) |
| 7 | +[](https://www.npmjs.com/package/@opd/g2plot-vue) |
| 8 | +[](https://www.npmjs.com/package/@opd/g2plot-vue) |
| 9 | +[](https://codecov.io/gh/open-data-plan/g2plot-vue) |
| 10 | + |
| 11 | +## Install |
| 12 | + |
| 13 | +``` |
| 14 | +npm install @opd/g2plot-vue |
| 15 | +``` |
| 16 | + |
| 17 | +## Usage |
| 18 | + |
| 19 | +```tsx |
| 20 | +import { LineChart, LineChartProps } from '@opd/g2plot-vue' |
| 21 | + |
| 22 | +const config: LineChartProps = { |
| 23 | + height: 400, |
| 24 | + title: { |
| 25 | + visible: true, |
| 26 | + text: '配置折线数据点样式', |
| 27 | + }, |
| 28 | + description: { |
| 29 | + visible: true, |
| 30 | + text: '自定义配置趋势线上数据点的样式', |
| 31 | + }, |
| 32 | + padding: 'auto', |
| 33 | + forceFit: true, |
| 34 | + xField: 'year', |
| 35 | + yField: 'value', |
| 36 | + label: { |
| 37 | + visible: true, |
| 38 | + type: 'point', |
| 39 | + }, |
| 40 | + point: { |
| 41 | + visible: true, |
| 42 | + size: 5, |
| 43 | + }, |
| 44 | + xAxis: { |
| 45 | + tickCount: 10, |
| 46 | + }, |
| 47 | + data: [ |
| 48 | + { year: '1991', value: 3 }, |
| 49 | + { year: '1992', value: 4 }, |
| 50 | + { year: '1993', value: 3.5 }, |
| 51 | + { year: '1994', value: 5 }, |
| 52 | + { year: '1995', value: 4.9 }, |
| 53 | + { year: '1996', value: 6 }, |
| 54 | + { year: '1997', value: 7 }, |
| 55 | + { year: '1998', value: 9 }, |
| 56 | + { year: '1999', value: 11 }, |
| 57 | + ], |
| 58 | +} |
| 59 | + |
| 60 | +export default () => { |
| 61 | + return <LineChart {...config} /> |
| 62 | +} |
| 63 | +``` |
| 64 | + |
| 65 | +## API |
| 66 | + |
| 67 | +All config defined in `G2Plot` [document](https://g2plot.antv.vision/zh/docs/manual/introduction) can be used as `props` or `attrs` |
| 68 | + |
| 69 | +## Support Chart |
| 70 | + |
| 71 | +- [x] [`LineChart`](https://g2plot.antv.vision/zh/docs/manual/plots/line) |
| 72 | +- [x] [`StepLineChart`](https://g2plot.antv.vision/zh/examples/step-line/multiple) |
| 73 | +- [x] [`ScatterChart`](https://g2plot.antv.vision/zh/docs/manual/plots/scatter) |
| 74 | +- [x] [`ColumnChart`](https://g2plot.antv.vision/zh/docs/manual/plots/column) |
| 75 | +- [x] [`HistogramChart`](https://g2plot.antv.vision/zh/examples/column/histogram) |
| 76 | +- [x] [`StackedColumnChart`](https://g2plot.antv.vision/zh/docs/manual/plots/stacked-column) |
| 77 | +- [x] [`RangeColumnChart`](https://g2plot.antv.vision/zh/docs/manual/plots/range-column) |
| 78 | +- [x] [`PercentStackedColumnChart`](https://g2plot.antv.vision/zh/examples/column/percent-stacked) |
| 79 | +- [x] [`GroupedColumnChart`](https://g2plot.antv.vision/zh/docs/manual/plots/grouped-column) |
| 80 | +- [x] [`WaterfallChart`](https://g2plot.antv.vision/zh/examples/column/waterfall) |
| 81 | +- [x] [`BarChart`](https://g2plot.antv.vision/zh/docs/manual/plots/bar) |
| 82 | +- [x] [`StackedBarChart`](https://g2plot.antv.vision/zh/docs/manual/plots/stacked-bar) |
| 83 | +- [x] [`RangeBarChart`](https://g2plot.antv.vision/zh/docs/manual/plots/range-bar) |
| 84 | +- [x] [`PercentStackedBarChart`](https://g2plot.antv.vision/zh/examples/bar/percent-stacked) |
| 85 | +- [x] [`GroupedBarChart`](https://g2plot.antv.vision/zh/docs/manual/plots/grouped-bar) |
| 86 | +- [x] [`AreaChart`](https://g2plot.antv.vision/zh/docs/manual/plots/area) |
| 87 | +- [x] [`DensityChart`](https://github.com/antvis/G2Plot/blob/master/src/plots/density/index.ts) |
| 88 | +- [x] [`StackedAreaChart`](https://g2plot.antv.vision/zh/docs/manual/plots/stacked-area) |
| 89 | +- [x] [`PercentStackedAreaChart`](https://g2plot.antv.vision/zh/examples/area/percent-stacked) |
| 90 | +- [x] [`BubbleChart`](https://g2plot.antv.vision/zh/docs/manual/plots/bubble) |
| 91 | +- [x] [`PieChart`](https://g2plot.antv.vision/zh/docs/manual/plots/pie) |
| 92 | +- [x] [`RadarChart`](https://g2plot.antv.vision/zh/docs/manual/plots/radar) |
| 93 | +- [x] [`GaugeChart`](https://g2plot.antv.vision/zh/docs/manual/plots/gauge) |
| 94 | +- [x] [`HeatmapChart`](https://g2plot.antv.vision/zh/docs/manual/plots/heatmap) |
| 95 | +- [x] [`ProgressChart`](https://g2plot.antv.vision/zh/docs/manual/plots/sparkline-progress) |
| 96 | +- [x] [`RingProgressChart`](https://g2plot.antv.vision/zh/docs/manual/plots/sparkline-ring-progress) |
| 97 | +- [x] [`TinyLineChart`](https://g2plot.antv.vision/zh/docs/manual/plots/sparkline-line) |
| 98 | +- [x] [`TinyAreaChart`](https://g2plot.antv.vision/zh/docs/manual/plots/sparkline-area) |
| 99 | +- [x] [`TinyColumnChart`](https://g2plot.antv.vision/zh/docs/manual/plots/sparkline-column) |
| 100 | +- [x] [`FunnelChart`](https://g2plot.antv.vision/zh/examples/funnel/basic) |
| 101 | +- [x] [`LiquidChart`](https://g2plot.antv.vision/zh/examples/liquid/basic) |
| 102 | +- [x] [`RoseChart`](https://g2plot.antv.vision/zh/examples/rose/basic) |
| 103 | +- [x] [`WordCloudChart`](https://g2plot.antv.vision/zh/examples/word-cloud/basic) |
| 104 | +- [x] [`BulletChart`](https://g2plot.antv.vision/zh/examples/bullet/basic) |
| 105 | +- [x] [`TreemapChart`](https://g2plot.antv.vision/zh/examples/treemap/rect) |
| 106 | +- [x] [`CalendarChart`](https://g2plot.antv.vision/zh/examples/calendar/basic) |
| 107 | +- [x] [`DonutChart`](https://g2plot.antv.vision/zh/examples/pie/donut) |
| 108 | +- [x] [`StackedRoseChart`](https://g2plot.antv.vision/zh/examples/rose/rose#stacked-rose) |
| 109 | +- [x] [`GroupedRoseChart`](https://g2plot.antv.vision/zh/examples/rose/rose#grouped-rose) |
| 110 | + |
| 111 | +## Develop |
| 112 | + |
| 113 | +``` |
| 114 | +npm install |
| 115 | +npm run build |
| 116 | +``` |
0 commit comments