vue antV G2-3.X 구성요소화 소개

이 글에서는 Vue antV G2-3의 컴포넌트화를 주로 소개합니다. 온라인에서 알리바바 차트 antv를 보고 너무 좋다고 생각해서 Vue에 통합해서 사용해 보고 싶었습니다. Vuejs2.vue

npm install @antv/g2 --save

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

효과

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

관련 권장 사항:

Vue 프로젝트에 동적 브라우저 헤더 제목을 추가하는 방법

# 🎜🎜 #

부트스트랩-datatimepicker 플러그인 사용

위 내용은 vue antV G2-3.X 구성요소화 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!