在Vue中使用antv的示例代码


Posted in Javascript onJune 29, 2020

一,在vue原型中使用

1.首先安装antv/g2

yarn add @antv/g2 --save

2.在main.js中挂在到vue原型实例中

const G2 = require('@antv/g2')
Vue.prototype.$G2 = G2

3.在vue文件中可以直接在mounted生命周期中直接使用

<template>
 <div>
  <div id="c1"></div>
 </div>
</template>

<script>
export default {
 mounted() {
  this.initComponent();
 },
 data() {
  return {
   msg: "",
   chart: null,
   data: [
    { genre: "Sports", sold: 275 },
    { genre: "Strategy", sold: 115 },
    { genre: "Action", sold: 120 },
    { genre: "Shooter", sold: 350 },
    { genre: "Other", sold: 150 }
   ]
  };
 },
 methods: {
  initComponent() {
   const chart = new this.$G2.Chart({
    container: "c1",
    width: 600,
    height: 300
   });
   chart.source(this.data);
   chart
    .interval()
    .position("genre*sold")
    .color("genre");
   this.chart = chart;
   this.chart.render();
  }
 }
};
</script>

二,按需引用

1.还是安装atv/g2

yarn add @antv/g2 --save

2.直接在组件中按需引入

<template>
 <div>
  <div id="l1"></div>
 </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
 data() {
  return {
   year: [
    { year: "1991", value: 3 },
    { year: "1992", value: 4 },
    { year: "1993", value: 3.5 },
    { year: "1994", value: 5 },
    { year: "1995", value: 4.9 },
    { year: "1996", value: 6 },
    { year: "1997", value: 7 },
    { year: "1998", value: 9 },
    { year: "1999", value: 13 }
   ]
  };
 },
 mounted() {
  this.initLineChart()
 },
 methods: {
  initLineChart() {
   const chart = new Chart({
    container: "l1",
    autoFit: true,
    height: 500
   });
   chart.data(this.year);
   chart.scale({
    year: {
     range: [0, 1]
    },
    value: {
     min: 0,
     nice: true
    }
   });
   chart.tooltip({
    showCrosshairs: true, // 展示 Tooltip 辅助线
    shared: true
   });
   chart
    .line()
    .position("year*value")
    .label("value");
   chart.point().position("year*value");
   chart.render();
  }
 }
};
</script>
<style scoped>
</style>

示例代码

<template>
 <div>
  <div><h1 style="color: white">{{title}}</h1></div>
  <span>
   <div id="c1"></div>
   <div id="mountNode"></div>
  </span>
 </div>
</template>

<script>
  import G2 from '@antv/g2';
  export default {
    name: "spectaculars",
    data(){
      return{
        title:'地区货品跟进看板',
        basicColumnChartProp:{
          data:[{ genre: 'Sports', sold: 275 },
            { genre: 'Strategy', sold: 115 },
            { genre: 'Action', sold: 120 },
            { genre: 'Shooter', sold: 350 },
            { genre: 'Other', sold: 150 }],
          container:'c1',
          width:600,
          height:300
        },
        basicBarChartProp:{
          container:'mountNode',
          size:{'width':500,'height':300},
          data:[
            {
              country: '巴西',
              population: 18203
            }, {
              country: '印尼',
              population: 23489
            }, {
              country: '美国',
              population: 29034
            }, {
              country: '印度',
              population: 104970
            }, {
              country: '中国',
              population: 131744
            }
          ]
        }
      }
    },
    methods:{
      test:function () {
        const data = this.basicColumnChartProp.data;
        // Step 1: 创建 Chart 对象
        const chart = new G2.Chart({
          container: this.basicColumnChartProp.container, // 指定图表容器 ID
          width : this.basicColumnChartProp.width, // 指定图表宽度
          height : this.basicColumnChartProp.height // 指定图表高度
        });
        // Step 2: 载入数据源
        chart.source(data);
        // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
        chart.interval().position('genre*sold').color('genre')
        // Step 4: 渲染图表
        chart.render();
      },
      basicBarChart:function () {
        let data = this.basicBarChartProp.data;
        let chart = new G2.Chart({
          container: this.basicBarChartProp.container,
          width:this.basicBarChartProp.size.width,
          height:this.basicBarChartProp.size.height
        });
        chart.source(data);
        chart.axis('country', {
          label: {
            offset: 12
          }
        });
        chart.coord().transpose();
        chart.interval().position('country*population');
        chart.render();
      }
    },
    mounted() {
      this.test();
      this.basicBarChart();
    },
    beforeCreate () {
      document.querySelector('body').setAttribute('style', 'background:#000000')
    },
    beforeDestroy () {
      document.querySelector('body').removeAttribute('style')
    }
  }
</script>

<style scoped>

</style>

到此这篇关于在Vue中使用antv的示例代码的文章就介绍到这了,更多相关Vue中使用antv内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 #Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 #Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 #Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 #Javascript
详解小程序横屏方案对比
Jun 28 #Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 #Javascript
js模拟实现百度搜索
Jun 28 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
javascript中的this详解
2014/12/08 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
javascript简易画板开发
2020/04/12 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
django session完成状态保持的方法
2018/11/27 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
金融管理专业求职信
2014/07/10 职场文书
4s店活动策划方案
2014/08/25 职场文书
公司捐书倡议书
2015/04/27 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Flink 侧流输出源码示例解析
2022/09/23 Servers