在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 相关文章推荐
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
在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
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python实现字典的key和values的交换
2015/08/04 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
PyTorch的Debug指南
2021/05/07 Python