Skip to content
This repository has been archived by the owner. It is now read-only.
This Project Is Deprecated. Use [Viser](https://github.com/viserjs/viser) instead. Factory wrapper for using G2 easily in a Vue Component.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
lib
src
.babelrc
.gitignore
.npmignore
CHANGELOG.md
README.md
bower.json
index.js
package-lock.json
package.json
webpack.base.js
webpack.config.js
webpack.demo.config.js
yarn.lock

README.md

g2-vue

Factory wrapper for using G2 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

Install

$ npm install @antv/g2 --save
$ npm install g2-vue --save

Usage

<template>
  <div>
    <LineChart
      :data="lineData"
    />
  </div>
</template>
<script>
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
    }
  }
}
</script>
You can’t perform that action at this time.