关于vue antV G2-3.X组件化的介绍

这篇文章主要介绍了关于vue antV G2-3.X组件化的介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

从网上看到 阿里系的图表 antv 觉得非常不错，就想整合到vue中使用。参考了Vuejs2.X组件化-阿里的G2图表组件

安装

npm install @antv/g2 --save

创建vue组件 components/G2Line.vue

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

<script>
import G2 from &#39;@antv/g2&#39;
export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    charData: {
      type: Array,
      default: function () {
        return {
          data: []
        }
      }
    },
    id: String
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart: function () {
      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(&#39;value&#39;, {
        min: 0
      })
      this.chart.scale(&#39;year&#39;, {
        range: [0, 1]
      })
      this.chart.tooltip({
        crosshairs: {
          type: &#39;line&#39;
        }
      })
      this.chart.line().position(&#39;year*value&#39;)
      this.chart.point().position(&#39;year*value&#39;).size(4).shape(&#39;circle&#39;).style({
        stroke: &#39;#fff&#39;,
        lineWidth: 1
      })
      this.chart.render()
    }
  }
}
</script>

修改HelloWorld.vue 引用组件

d477f9ce7bf77f53fbcf36bec1b69b7a
  e388a4556c0f65e1904146cc1a846bee
    5be1d519dcba687de4ce04b528bc9c97654ac07f76a7648344216c1594bcf368
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
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请求接口
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何在Vue项目中添加动态浏览器头部title的问题

bootstrap-datatimepicker插件的使用

以上是关于vue antV G2-3.X组件化的介绍的详细内容。更多信息请关注PHP中文网其他相关文章！