vue antV G2-3.X組件化

從網上看到 阿里系的圖表 antv 以爲很是不錯，就想整合到vue中使用。參考了Vuejs2.X組件化-阿里的G2圖表組件

// 2019.03.30更新
附上 G2的快速上手 供你們參考

// 2019.04.24
重親測試了一遍 demo沒有問題

安裝

npm install @antv/g2 --save

建立vue組件 components/G2Line.vue

<template>
  <div :id="id"></div>
</template>

<script>
import G2 from '@antv/g2'
export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    charData: {
      type: Array,
      default: function () {
        return {
          data: []
        }
      }
    },
    id: String
  },
  // 若是使用serverData傳過來的靜態數據 請使用mounted()方法 並註釋掉watch
  mounted () {
    this.drawChart()
  },
  // 監聽API接口傳過來的數據 使用watch  2018-08-21更新
  // watch: {
      // charData: function (val, oldVal) {    // 監聽charData，當發生變化時，觸發這個回調函數繪製圖表
      // console.log('new: %s, old: %s', val, oldVal);
      // this.drawChart(val);
    // }
  },
  methods: {
    drawChart: function () {
      // 2019.03.30 更新 destory方法已被廢棄
      // this.chart && this.chart.destory()
      this.chart = new G2.Chart({
        container: this.id,
        width: 600,
        height: 300
      })
      this.chart.source(this.charData)
      this.chart.scale('value', {
        min: 0
      })
      this.chart.scale('year', {
        range: [0, 1]
      })
      this.chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      })
      this.chart.line().position('year*value')
      this.chart.point().position('year*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
      })
      this.chart.render()
    }
  }
}
</script>

修改HelloWorld.vue 引用組件

<template>
  <div>
    <g2-line :charData="serverData" :id="'c1'"></g2-line>
  </div>
</template>

<script>
import G2Line from './G2Line.vue'
export default {
  components: {
    G2Line
  },
  data () {
    return {
      serverData: [{
        year: '2010',
        value: 3
      }, {
        year: '2011',
        value: 4
      }, {
        year: '2012',
        value: 3.5
      }, {
        year: '2013',
        value: 5
      }, {
        year: '2014',
        value: 4.9
      }, {
        year: '2015',
        value: 6
      }, {
        year: '2016',
        value: 7
      }, {
        year: '2017',
        value: 9
      }, {
        year: '2018',
        value: 13
      }]
    }
  },
  methods: {
    // 此處省略從服務器獲取數據而且賦值給this.serverData
    // 推薦使用axios請求接口
  }
}
</script>

效果