https://github.com/fireyy/g2-vue

This Project Is Deprecated. Use [Viser](https://github.com/viserjs/viser) instead. Factory wrapper for using G2 easily in a Vue Component.
https://github.com/fireyy/g2-vue

Last synced: 3 months ago
JSON representation

This Project Is Deprecated. Use [Viser](https://github.com/viserjs/viser) instead. Factory wrapper for using G2 easily in a Vue Component.

• Host: GitHub
• URL: https://github.com/fireyy/g2-vue
• Owner: fireyy
• Archived: true
• Created: 2017-03-27T08:39:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-05T02:33:50.000Z (over 6 years ago)
• Last Synced: 2024-01-17T18:25:29.370Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 499 KB
• Stars: 46
• Watchers: 5
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Lists

• awesome-vue. - g2-vue - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)
• awesome-vue - g2-vue - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)
• awesome-vue - g2-vue ★44 - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)
• awesome-vue - g2-vue - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)
• awesome-vue - g2-vue - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)
• awesome-vue - g2-vue - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)
• awesome-vuejs - g2-vue - Factory wrapper for using G2 easily in a Vue Component. (UI Components / Charts)

README

        
# g2-vue

Factory wrapper for using [G2](http://g2.alipay.com) easier in a Vue Component with dynamic `data` and `size` props

*Note that `g2-vue` is just a wrapper, if you want to make a better chart, `docs of G2` is [HERE](http://g2.alipay.com/)*

## Install

```bash

$ npm install @antv/g2 --save

$ npm install g2-vue --save

```

## Usage

```html

  


    

  


import createG2 from 'g2-vue'

let lineData = [

  {'time': '3-21', 'pm25': 10},

  {'time': '3-22', 'pm25': 40}

]

const LineChart = createG2(chart => {

  chart.line().position('time*pm25').color('pm25').shape('spline').size(2)

  chart.render()

})

export default {

  components: {

    LineChart

  },

  data () {

    return {

      lineData: lineData

    }

  }

}

```