Introduction to vue antV G2-3.X componentization

This article mainly introduces the componentization of vue antV G2-3. I think the Alibaba chart antv is very good, and I want to integrate it into vue for use. Referring to Vuejs2.

npm install @antv/g2 --save

Modify HelloWorld.vue reference component

<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>

Effect

The above is the entire article Content, I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website! Related recommendations:

How to add a dynamic browser header title to the Vue project

bootstrap-datatimepicker Use of plug-ins

The above is the detailed content of Introduction to vue antV G2-3.X componentization. For more information, please follow other related articles on the PHP Chinese website!