在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 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Django中create和save方法的不同
2019/08/13 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
软件工程专业推荐信
2013/10/28 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
房产公证书格式
2015/01/26 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技