登录  /  注册
首页 > web前端 > js教程 > 正文

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

不言
发布: 2018-07-10 17:16:22
原创
5097人浏览过

这篇文章主要介绍了关于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 :charData="serverData" :id="&#39;c1&#39;"></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>
登录后复制

效果

1577055664-5b397aa2a16d8_articlex[1].png

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

相关推荐:

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

bootstrap-datatimepicker插件的使用

以上就是关于vue antV G2-3.X组件化的介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号