vue使用antv-G2

1、安装

npm install @antv/g2plot

2、页面中使用

首先引入

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

用div来放需要显示的图，id必须写
```
<div id="liveVerifyModuleDom"></div>
```

在data中定义数据

export default { name: "test", data() { return { // 现场验证-版本成功率 liveVerifyVersionData: [], // 用于二次请求图会显示多个问题 liveVerifyVersionCharts: null, } }
}

调用接口获取数据

  // 获取搜索结果getSearchList() {this.$axios.get('/zentao/searchList', {params: {zentaosid: this.sessionID,}}).then(res => {if(res.status === 200){this.liveVerifyVersionData= JSON.parse(res.data.data).bugs// 调用绘制图的方法this.OpenLiveVerifyVersion()}}).catch(err => {console.log(err)})},

绘制图（可以通过antv官网选择图：所有图表 | G2）

   // 绘制成功率图OpenLiveVerifyVersion(){//再次请求先销毁绘制的图this.liveVerifyVersionCharts && this.liveVerifyVersionCharts.destroy()const liveVerifyVersionChart = new Chart({// id必须与div中的一致（即liveVerifyVersionDom）container: 'liveVerifyVersionDom',autoFit: true,height: 400,padding:[20,0,30,40],})liveVerifyVersionChart.data(this.liveVerifyVersionData);liveVerifyVersionChart.tooltip({showMarkers: false,});liveVerifyVersionChart.interaction('element-active');liveVerifyVersionChart.legend(false);liveVerifyVersionChart.interval({background: {style: {radius: 8,},},}).position('name*value')// .color('value', (val) => {//   if (val <= '0.6') {//     return '#ff4d4f';//   }//   return '#2194ff';// }).label('value', {content: (originData) => {const val = parseFloat(originData.value);if (val < 0.05) {return (val * 100).toFixed(1) + '%';}},offset: 10,});liveVerifyVersionChart.scale('value', {nice: false,alias: '成功率',formatter: value => {return value*100 + '%'}});// 添加文本标注array.forEach((item) => {liveVerifyVersionChart.annotation().text({position: [item.name, item.value],// content: item.name,style: {textAlign: 'center',},offsetY: -30,}).text({position: [item.name, item.value],content: (item.value * 100).toFixed(0) + '%',style: {textAlign: 'center',},offsetY: -12,});});liveVerifyVersionChart.render();this.liveVerifyVersionCharts = liveVerifyVersionChart},

最后在methods调用请求方法

methods：{this.getSearchList()}

vue使用antv-G2相关推荐

Vue使用antV G2简单实例
工作中需要制作一个看板,选型选用antV G2进行开发. 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用. 1.安装antv/g2 在WebStrom下面Terminal中输入 np ...
基于AntV G2实现一个通用可视化Vue插件
前言 AntV G2坚持自然.确定性.意义感.生长性的设计价值观.与其他可视化插件不同的是,G2是以数据驱动的高交互可视化图形语法,具有高度的易用性和可扩展性. 随着业务可视化不断发展,数据复杂度越来 ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
antv g2 x轴两边留边距
antv g2 x轴两边留边距问题背景:在做vue项目时,需要用到-蚂蚁数据可视化antv做数据图表. 问题: 图表的内容超出了x轴的边缘这个问题看了很久,网上的解释很少,最后还是看文档终于找到了 ...
在Vue里使用G2地图制作省级地图展示各市级数据
制作效果一.相关依赖 1.npm安装G2 npm install @antv/g2 --save 2.npm安装data-set npm install @antv/data-set --save ...
AntV G2 饼图
import { Chart } from '@antv/g2';const data = [{ type: '1岁', value: 340 },{ type: '2岁', value: 530 } ...
antv g2绘制中国地图及每个省份区域单独展示
使用技术: antv g2 地图文件:https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json 该文件 ...
vue中使用G2问题汇总
前言忙活完动态表单,动态附件,动态表格等等事情后,最近公司又在进军报表可视化问题了,对于我们前端而言如何将一份份数据美美的展示在页面上实为一项艰巨的任务. 对比了现有的几个比较有名的可视化工具之后, ...
antv g2字体阴影_antv g2坐标轴文字过长时添加省略号，悬浮显示全部
antv g2坐标轴文字过长时添加省略号,悬浮显示全部示例改编自antv基础条形图 https://g2.antv.vision/zh/examples/bar/basic#basic import ...
[vue]vue接入AntV G2Plot
文章目录安装配置使用安装 npm install @antv/g2plot --save 配置在main.js中引入 import g2 from '@antv/g2plot' Vue.p ...

vue使用antv-G2

vue使用antv-G2相关推荐

最新文章

热门文章