电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

在vue項目中引用Antv G2,以餅圖為例講解

瀏覽:50日期:2022-11-10 08:33:53

我就廢話不多說了,大家還是直接看代碼吧~

npm install @antv/g2 --save

template內(nèi)容:

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

js部分:

​//引入G2組件import G2 from '@antv/g2'; ​export default { name:'', //數(shù)據(jù)部分 data(){ return{ sourceData: [],//聲明一個數(shù)組 chart: {}, //全局定義chart對象 id: Math.random().toString(36).substr(2), //動態(tài)生成ID,便于多次引用 } }, //初始加載 mounted() { this.initComponent(); }, methods: { //初始化獲取數(shù)據(jù) initStrateGoal() { debugger; let _this = this; _this.$http .$get('后臺接口地址') .then(function(response) { if (_this.$util.isBlank(response.data)) { return; } _this.sourceData = response.data; //調(diào)用繪圖方法 _this.getDrawing(_this.sourceData); }) .catch(function(error) { _this.$message.error(_this, error); }); }, //繪制圖形 getDrawing(sourceData) { let _this = this; // Step 1: 創(chuàng)建 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: 載入數(shù)據(jù)源 _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 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;'>目標(biāo)總數(shù)<br><span style='color:#8c8c8c;font-size:14px'>’ + sumCount + '</span></div>', alignX: 'middle', alignY: 'middle' }); // Step 3:創(chuàng)建圖形語法,繪制餅圖 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) { //數(shù)據(jù)顯示為百分比形式 percent = percent + '%'; return { name: item, value: percent }; }) .style({ lineWidth: 1, stroke: '#fff' }); // Step 4:最后一步渲染至畫布 _this.chart.render(); //初始加載圖片后默認(rèn)顯示第一個條目突起,點擊后進(jìn)行變更 interval.setSelected(sourceData[0]); }, //因為父級頁面用的事Tab調(diào)用,會有顯示不全的現(xiàn)象發(fā)生,所以銷毀所有對象后重新加載 reloadDrawing() { //銷毀畫布對象 this.chart.destroy(); //重新調(diào)用數(shù)據(jù)進(jìn)行加載 this.initStrateGoal(); } } }

*父級頁面時tab調(diào)用,并且是一個頁面多次引用,有兩個坑

1.tab點擊時,有的頁面顯示不全,樣式也有問題,需要銷毀重構(gòu)(只是我的個人方案,有其他方案的話可以推薦)

2.一個頁面有多個圖表,id是不能重復(fù)的,必須動態(tài)生成

補充知識:vue+antv與數(shù)據(jù)庫交互實現(xiàn)數(shù)據(jù)可視化圖表

一、安裝antv

npm install @antv/g2

二、在官網(wǎng)選擇自己需要的圖表

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

這里以這個圖為例

在vue項目中引用Antv G2,以餅圖為例講解

右側(cè)就是實現(xiàn)這個圖的代碼,在這里加上.color(“type”)即可根據(jù)字段名顯示不同的顏色

在vue項目中引用Antv G2,以餅圖為例講解

這里數(shù)據(jù)的字段和值可以按需更改(更改字段名稱的話要把下面相關(guān)的字段名全部替換)

在vue項目中引用Antv G2,以餅圖為例講解

三、整合vue antv

在vue中引入antv

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

指定一個容器來放圖表

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

替換默認(rèn)的data數(shù)據(jù)

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: '總統(tǒng)房', checkInValue: 1500, checkInPercent: 0.06 } ] }; },

把繪圖代碼復(fù)制進(jìn)來

此處需要把默認(rèn)的container:‘container’ 修改為自己指定的容器id,渲染數(shù)據(jù)時,將data修改為this.xxx(自己定義的數(shù)據(jù)名稱),不同的圖修改的地方可能會不同

在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'); // 添加文本標(biāo)注 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函數(shù)中調(diào)用繪圖方法

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

啟動項目即可看到最終效果

在vue項目中引用Antv G2,以餅圖為例講解

三、與數(shù)據(jù)庫交互

添加一個獲取數(shù)據(jù)的方法(按自己的接口進(jìn)行相應(yīng)的替換)

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

在created函數(shù)中調(diào)用獲取數(shù)據(jù)的函數(shù)

created() { this.getData() },

在watch函數(shù)中監(jiān)聽數(shù)據(jù),數(shù)據(jù)發(fā)生變化時重新渲染圖表

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

最后得到的圖表數(shù)據(jù)就是數(shù)據(jù)庫中的數(shù)據(jù)了

在vue項目中引用Antv G2,以餅圖為例講解

以上這篇在vue項目中引用Antv G2,以餅圖為例講解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
主站蜘蛛池模板: 制样机-密封锤式破碎机-粉碎机-智能马弗炉-南昌科鑫制样 | 不锈钢电动球阀_气动高压闸阀_旋塞疏水调节阀_全立阀门-来自温州工业阀门巨头企业 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 气弹簧定制-气动杆-可控气弹簧-不锈钢阻尼器-工业气弹簧-可调节气弹簧厂家-常州巨腾气弹簧供应商 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 动库网动库商城-体育用品专卖店:羽毛球,乒乓球拍,网球,户外装备,运动鞋,运动包,运动服饰专卖店-正品运动品网上商城动库商城网 - 动库商城 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 合肥钣金加工-安徽激光切割加工-机箱机柜加工厂家-合肥通快 | 护腰带生产厂家_磁石_医用_热压护腰_登山护膝_背姿矫正带_保健护具_医疗护具-衡水港盛 | 山东钢衬塑罐_管道_反应釜厂家-淄博富邦滚塑防腐设备科技有限公司 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 温州富欧金属封头-不锈钢封头厂家 | 杭州荣奥家具有限公司-浙江办公家具,杭州办公家具厂 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 北京印刷厂_北京印刷_北京印刷公司_北京印刷厂家_北京东爵盛世印刷有限公司 | 期货软件-专业期货分析软件下载-云智赢 | 郑州墨香品牌设计公司|品牌全案VI设计公司 | 滚珠丝杆升降机_螺旋升降机_丝杠升降机-德迈传动 | 螺旋叶片_螺旋叶片成型机_绞龙叶片_莱州源泽机械制造有限公司 | led太阳能路灯厂家价格_风光互补庭院灯_农村市政工程路灯-中山华可路灯品牌 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 恒湿机_除湿加湿一体机_恒湿净化消毒一体机厂家-杭州英腾电器有限公司 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 陶瓷加热器,履带式加热器-吴江市兴达电热设备厂| 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 石磨面粉机|石磨面粉机械|石磨面粉机组|石磨面粉成套设备-河南成立粮油机械有限公司 | 粘弹体防腐胶带,聚丙烯防腐胶带-全民塑胶 | 新疆乌鲁木齐网站建设-乌鲁木齐网站制作设计-新疆远璨网络 | 大白菜官网,大白菜winpe,大白菜U盘装系统, u盘启动盘制作工具 | 四川成都干燥设备_回转筒干燥机_脉冲除尘器_输送设备_热风炉_成都川工星科机电设备有限公司 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 氧化锆纤维_1800度高温退火炉_1800度高温烧结炉-南京理工宇龙新材料股份有限公司 | 河南新乡德诚生产厂家主营震动筛,振动筛设备,筛机,塑料震动筛选机 | 电子元器件呆滞料_元器件临期库存清仓尾料_尾料优选现货采购处理交易商城 | 2025黄道吉日查询、吉时查询、老黄历查询平台- 黄道吉日查询网 | 好看的韩国漫画_韩漫在线免费阅读-汗汗漫画 | 济南电缆桥架|山东桥架-济南航丰实业有限公司 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 | 同步带轮_同步带_同步轮_iHF合发齿轮厂家-深圳市合发齿轮机械有限公司 | 山东限矩型液力偶合器_液力耦合器易熔塞厂家-淄博市汇川源机械厂 |