在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 Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
javascript屏蔽右键代码
May 15 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
js实现微信分享代码
Oct 11 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
在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生成缩略图的函数代码(修改版)
2011/01/18 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python中的元类编程入门指引
2015/04/15 Python
Python中的choice()方法使用详解
2015/05/15 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python中entry用法讲解
2020/12/04 Python
自我评价正确写法范文
2013/12/10 职场文书
个人自我鉴定总结
2014/03/25 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
跳蚤市场口号
2014/06/13 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2019年入党思想汇报
2019/03/25 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
python创建字典及相关管理操作
2022/04/13 Python