在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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Python正规则表达式学习指南
2016/08/02 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python如何输出反斜杠
2020/06/18 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
2014教师研修学习体会
2014/07/08 职场文书
党章培训心得体会
2014/09/04 职场文书
展览会邀请函
2015/02/02 职场文书
建国大业观后感
2015/06/01 职场文书
辞职申请书范本
2019/05/20 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP