在vue项目中引用Antv G2,以饼图为例讲解


Posted in Javascript onOctober 28, 2020

我就废话不多说了,大家还是直接看代码吧~

npm install @antv/g2 --save

template内容:

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

js部分:

​//引入G2组件
import G2 from "@antv/g2";
 
​
export default {
  name:"",
  //数据部分
  data(){
    return{
     sourceData: [],//声明一个数组
     chart: {}, //全局定义chart对象
     id: Math.random().toString(36).substr(2), //动态生成ID,便于多次引用
    }
  },
  //初始加载 
  mounted() {
  this.initComponent();
 },
  methods: {
  //初始化获取数据
  initStrateGoal() {
   debugger;
   let _this = this;
   _this.$http
    .$get("后台接口地址")
    .then(function(response) {
     if (_this.$util.isBlank(response.data)) {
      return;
     }
     _this.sourceData = response.data;
     //调用绘图方法
     _this.getDrawing(_this.sourceData);
    })
    .catch(function(error) {
     _this.$message.error(_this, error);
    });
  },
  //绘制图形
  getDrawing(sourceData) {
   let _this = this;
   // Step 1: 创建 Chart 对象
   _this.chart = new G2.Chart({
    container: _this.id,
    forceFit: true,
    height: 255,
    padding: [30, 0, 35, 0],
    animate: false
    // margin: [0, 500]
   });
   let sumCount = 0;
   for (let i in sourceData) {
    sumCount = sumCount + Number(sourceData[i].count);
   }
   // Step 2: 载入数据源
   _this.chart.source(sourceData, {
    percent: {
     formatter: function formatter(val) {
      val = val + "%";
      return val;
     }
    }
   });
   _this.chart.coord("theta", {
    radius: 0.75,
    innerRadius: 0.6
   });
   //消息提示
   _this.chart.tooltip({
    showTitle: false,
    itemTpl:
     '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
   });
   // 辅助文本
   _this.chart.guide().html({
    position: ["50%", "50%"],
    html:
     '<div style="color:#8c8c8c;font-size: 10px;text-align: center;width: 6em;">目标总数<br><span style="color:#8c8c8c;font-size:14px">' +
     sumCount +
     "</span></div>",
    alignX: "middle",
    alignY: "middle"
   });
   // Step 3:创建图形语法,绘制饼图
   var interval = _this.chart
    .intervalStack()
    .position("percent")
    .color("item")
    .label("percent", {
     formatter: function formatter(val, item) {
      return item.point.item + ": " + val;
     }
    })
    .tooltip("item*percent", function(item, percent) {
     //数据显示为百分比形式
     percent = percent + "%";
     return {
      name: item,
      value: percent
     };
    })
    .style({
     lineWidth: 1,
     stroke: "#fff"
    });
   // Step 4:最后一步渲染至画布
   _this.chart.render();
   //初始加载图片后默认显示第一个条目突起,点击后进行变更
   interval.setSelected(sourceData[0]);
  },
  //因为父级页面用的事Tab调用,会有显示不全的现象发生,所以销毁所有对象后重新加载
  reloadDrawing() {
   //销毁画布对象
   this.chart.destroy();
   //重新调用数据进行加载
   this.initStrateGoal();
  }
 } 
}

*父级页面时tab调用,并且是一个页面多次引用,有两个坑

1.tab点击时,有的页面显示不全,样式也有问题,需要销毁重构(只是我的个人方案,有其他方案的话可以推荐)

2.一个页面有多个图表,id是不能重复的,必须动态生成

补充知识:vue+antv与数据库交互实现数据可视化图表

一、安装antv

npm install @antv/g2

二、在官网选择自己需要的图表

https://g2.antv.vision/zh/examples/gallery

这里以这个图为例

在vue项目中引用Antv G2,以饼图为例讲解

右侧就是实现这个图的代码,在这里加上.color(“type”)即可根据字段名显示不同的颜色

在vue项目中引用Antv G2,以饼图为例讲解

这里数据的字段和值可以按需更改(更改字段名称的话要把下面相关的字段名全部替换)

在vue项目中引用Antv G2,以饼图为例讲解

三、整合vue antv

在vue中引入antv

import { Chart } from "@antv/g2";

指定一个容器来放图表

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

替换默认的data数据

data() {
  return {
   mydata: [
    { roomTypeName: "单人间", checkInValue: 654, checkInPercent: 0.02 },
    { roomTypeName: "双人间", checkInValue: 654, checkInPercent: 0.02 },
    { roomTypeName: "钟点房", checkInValue: 4400, checkInPercent: 0.2 },
    { roomTypeName: "海景房", checkInValue: 5300, checkInPercent: 0.24 },
    { roomTypeName: "主题房", checkInValue: 6200, checkInPercent: 0.28 },
    { roomTypeName: "家庭房", checkInValue: 3300, checkInPercent: 0.14 },
    { roomTypeName: "总统房", checkInValue: 1500, checkInPercent: 0.06 }
   ]
  };
 },

把绘图代码复制进来

此处需要把默认的container:‘container' 修改为自己指定的容器id,渲染数据时,将data修改为this.xxx(自己定义的数据名称),不同的图修改的地方可能会不同

在vue项目中引用Antv G2,以饼图为例讲解

methods: {
  initComponent() {
   const chart = new Chart({
    container: "roomTypeCheckIn",
    autoFit: true,
    height: 500,
    padding: [50, 20, 50, 20]
   });
   chart.data(this.mydata);
   chart.scale("checkInValue", {
    alias: "销售额"
   });

   chart.axis("roomTypeName", {
    tickLine: {
     alignTick: false
    }
   });
   chart.axis("checkInValue", false);

   chart.tooltip({
    showMarkers: false
   });
   chart
    .interval()
    .position("roomTypeName*checkInValue")
    .color("roomTypeName");
   chart.interaction("element-active");

   // 添加文本标注
   this.mydata.forEach(item => {
    chart
     .annotation()
     .text({
      position: [item.roomTypeName, item.checkInValue],
      content: item.checkInValue,
      style: {
       textAlign: "center"
      },
      offsetY: -30
     })
     .text({
      position: [item.roomTypeName, item.checkInValue],
      content: (item.checkInPercent * 100).toFixed(0) + "%",
      style: {
       textAlign: "center"
      },
      offsetY: -12
     });
   });
   chart.render();
  }
 }

在mounted函数中调用绘图方法

mounted() {
  this.initComponent();
 },

启动项目即可看到最终效果

在vue项目中引用Antv G2,以饼图为例讲解

三、与数据库交互

添加一个获取数据的方法(按自己的接口进行相应的替换)

getData() {
   roomTypeApi.getRoomTypeStatistics().then(res => {
    this.mydata = res.data.data
   })
  },

在created函数中调用获取数据的函数

created() {
   this.getData()
 },

在watch函数中监听数据,数据发生变化时重新渲染图表

watch: {
  mydata(b,a) {
    this.chart.changeData(b)
    this.chart.render()
  }
 },

最后得到的图表数据就是数据库中的数据了

在vue项目中引用Antv G2,以饼图为例讲解

以上这篇在vue项目中引用Antv G2,以饼图为例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
JS高级程序设计之class继承重点详解
Jul 07 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 #Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
You might like
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Python实现手绘图效果实例分享
2020/07/22 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2015年领班工作总结
2015/04/29 职场文书
同意落户证明
2015/06/19 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
年终工作总结范文
2019/06/20 职场文书
django中websocket的具体使用
2022/01/22 Python