在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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
理解javascript回调函数
Dec 28 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
微信小程序实现购物车小功能
Dec 30 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过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
JQuery节点元素属性操作方法
2015/06/11 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python实现的txt文件去重功能示例
2018/07/07 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
检举信的格式及范文
2014/04/04 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
社区健康教育工作方案
2014/06/03 职场文书
卫生标语大全
2014/06/21 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
电影雨中的树观后感
2015/06/15 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android