首頁 >web前端 >js教程 >關於vue antV G2-3.X組件化的介紹

關於vue antV G2-3.X組件化的介紹

不言
不言原創
2018-07-10 17:16:225403瀏覽

這篇文章主要介紹了關於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 引用元件

<template>
  <p>
    <g2-line></g2-line>
  </p>
</template>

<script>
import G2Line from &#39;./G2Line.vue&#39;
export default {
  components: {
    G2Line
  },
  data () {
    return {
      serverData: [{
        year: &#39;2010&#39;,
        value: 3
      }, {
        year: &#39;2011&#39;,
        value: 4
      }, {
        year: &#39;2012&#39;,
        value: 3.5
      }, {
        year: &#39;2013&#39;,
        value: 5
      }, {
        year: &#39;2014&#39;,
        value: 4.9
      }, {
        year: &#39;2015&#39;,
        value: 6
      }, {
        year: &#39;2016&#39;,
        value: 7
      }, {
        year: &#39;2017&#39;,
        value: 9
      }, {
        year: &#39;2018&#39;,
        value: 13
      }]
    }
  },
  methods: {
    // 此处省略从服务器获取数据并且赋值给this.serverData
    // 推荐使用axios请求接口
  }
}
</script>

效果

關於vue antV G2-3.X組件化的介紹

#以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何在Vue專案中新增動態瀏覽器頭部title的問題

bootstrap-datatimepicker外掛程式的使用

以上是關於vue antV G2-3.X組件化的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn