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

您的位置:首頁技術文章
文章詳情頁

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

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

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

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 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,以餅圖為例講解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
主站蜘蛛池模板: 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 传爱自考网_传爱自学考试网 | 螺旋丝杆升降机-SWL蜗轮-滚珠丝杆升降机厂家-山东明泰传动机械有限公司 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 运动木地板厂家_体育木地板安装_篮球木地板选购_实木运动地板价格 | 自动记录数据电子台秤,记忆储存重量电子桌称,设定时间记录电子秤-昆山巨天 | 东风体检车厂家_公共卫生体检车_医院体检车_移动体检车-锦沅科贸 | FAG轴承,苏州FAG轴承,德国FAG轴承-恩梯必传动设备(苏州)有限公司 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | WTB5光栅尺-JIE WILL磁栅尺-B60数显表-常州中崴机电科技有限公司 | 无线对讲-无线对讲系统解决方案-重庆畅博通信 | 视频教程导航网_视频教程之家_视频教程大全_最新视频教程分享发布平台 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 亮化工程,亮化设计,城市亮化工程,亮化资质合作,长沙亮化照明,杰奥思【官网】 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 冷凝水循环试验箱-冷凝水试验箱-可编程高低温试验箱厂家-上海巨为(www.juweigroup.com) | SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | 精密模具制造,注塑加工,吹塑和吹瓶加工,EPS泡沫包装生产 - 济南兴田塑胶有限公司 | 碳刷_刷握_集电环_恒压簧_电刷厂家-上海丹臻机电科技有限公司 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | 不锈钢丸厂家,铝丸,铸钢丸-淄博智源铸造材料有限公司 | 网站建设_网站制作_SEO优化推广_百度推广开户_朋友圈网络科技 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 蜗轮丝杆升降机-螺旋升降机-丝杠升降机厂家-润驰传动 | 大功率金属激光焊接机价格_不锈钢汽车配件|光纤自动激光焊接机设备-东莞市正信激光科技有限公司 定制奶茶纸杯_定制豆浆杯_广东纸杯厂_[绿保佳]一家专业生产纸杯碗的厂家 | 旋片真空泵_真空泵_水环真空泵_真空机组-深圳恒才机电设备有限公司 | 元拓建材集团官方网站| 陶瓷加热器,履带式加热器-吴江市兴达电热设备厂 | 河南15年专业网站建设制作设计,做网站就找郑州启凡网络公司 | 润东方环保空调,冷风机,厂房车间降温设备-20年深圳环保空调生产厂家 | 微信小程序定制,广州app公众号商城网站开发公司-广东锋火 | SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 包装机_厂家_价格-山东包装机有限公司 | 联系我们-腾龙公司上分客服微信19116098882 | 伺服电机_直流伺服_交流伺服_DD马达_拓达官方网站 | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | sus630/303cu不锈钢棒,440C/430F/17-4ph不锈钢研磨棒-江苏德镍金属科技有限公司 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 |