关于前端数据库可视化库的选择,vue3+antd+g2plot录课计划

news2024/9/19 10:36:12

之前:antdv
现在:g2plot https://g2plot.antv.antgroup.com/manual/introduction

在这里插入图片描述

录课内容:快速入门

图表示例:
在这里插入图片描述

选择使用比较广泛的示例类型,录课顺序如下:

  • 1、折线图
  • 2、面积图
  • 3、柱形图
  • 4、条形图
  • 5、饼图
  • 6、进度图
  • 7、散点气泡图
  • 8、关系图
  • 9、热力图
  • 10、雷达图
  • 11、词云图
  • 12、对称条形图
  • 13、分面图
  • 14、图表联动

后面按照上面的顺序录制课程,穿插一些实战案例。

课程目标:

  • 和zdppy结合
  • 和vue3结合
  • 和antd库结合
  • 和Tailwindcss结合
  • 将案例中的数据改造为前后端分离的动态数据,实现本地化
  • 打造一个专属的zdppy_g2plot库专门和这个前端图表库结合
  • 打造一个zdppy_amg2plot,用于快速生成后端的图表接口,实现低代码调用
  • 打造一个zdppy_mg2plot,用于将图表数据同步到MySQL数据库中

最终目标:打造一个可交互的数据分析平台,能够支持导入Excel文件,直接生成可视化图表。可以将图表下载到本地。

参考之前echarts的教学案例:
在这里插入图片描述
左侧是图表分类,每个分类下是二级子菜单,每个菜单对应一个案例,每个案例是一个实际的图表。

单独开一个小项目,作为教学项目和练习项目,最终支持Docker部署,可以在公网访问效果。

最好还能够在看到可视化效果的同时,还能够看到完整的案例前端代码。

比如一个tab栏,点源码就可以看到完整的源代码,点效果就可以看到最终的图表渲染效果。这样方便学习!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1926205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[Qt] Qt Creator中,新建QT文件时选择界面模版下的各选项

在Qt Creator中,新建文件时选择界面模版下的各选项具有特定的意义,这些选项主要帮助开发者根据项目需求快速生成不同类型的文件。以下是对这些选项的详细解释: 0. Qt Item Model 意义:列表模型是Qt中用于表示和操作数据的强大抽…

Ubuntu下载安装chrome浏览器

方法一:wget下载并安装 1、创建文件夹存安装包 cd /root/Downloads mkdir chrome 2、下载安装包到文件夹内 wget -c https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -P /root/Downloads/chrome 3、安装 cd chrome sudo dpkg -i go…

从0开始的STM32HAL库学习5

旋转编码计数器 修改中断代码 void EXTI0_IRQHandler(void) {/* USER CODE BEGIN EXTI0_IRQn 0 */if(__HAL_GPIO_EXTI_GET_FLAG(PB0_Pin)){if(HAL_GPIO_ReadPin(PB1_GPIO_Port, PB1_Pin)GPIO_PIN_RESET){count--;}/* USER CODE END EXTI0_IRQn 0 */HAL_GPIO_EXTI_IRQHandler…

【论文极速读】 可微分检索索引(Differential Search Index, DSI)

【论文极速读】 可微分检索索引(Differential Search Index, DSI) FesianXu 20240714 at WeChat Search Team 前言 最近从朋友处得知了DSI这个概念,所谓的可微分检索索引DSI,就是通过语言模型将检索过程中的索引和召回…

virtualbox的ubuntu默认ipv4地址为10.0.2.15的修改以及xshell和xftp的连接

virtualbox安装Ubuntu后,默认的地址为10.0.2.15 我们查看virtualbox的设置发现是NAT 学过计算机网络的应该了解NAT技术,为了安全以及缓解ip使用,我们留了部分私有ip地址。 私有IP地址网段如下: A类:1个A类网段&…

持续学习的综述: 理论、方法与应用(三:泛化分析)

前文连接:持续学习的综述: 理论、方法与应用(一) 前文连接:持续学习的综述: 理论、方法与应用(二:理论基础) 泛化分析 目前持续学习的理论研究主要是在增量任务的训练集上进行的,假…

Java面试题:MVCC

MVCC 保证事务的隔离性 排它锁: 一个事务获取了数据行的排他锁,其他事务就不能再获取该行的其他锁 MVCC: 多版本并发控制 维护一个数据的多个版本,使读写不存在冲突 具体实现依靠 隐藏字段 mysql中隐藏了三个隐藏字段 db_trx_id:最近修改事务 db_roll_ptr:指向上一个…

【Linux】Linux必备的基础指令

目录 Linux必备的基础指令一 、 什么是Linux二、 Linux常用命令2.1 ls2.2 pwd2.3 cd2.4 touch2.5 cat2.6 mkdir2.7 rm 三、 Linux重要指令3.1 cp3.2 mv3.3 tail3.4 vim3.5 grep3.6 ps3.7 netstat Linux必备的基础指令 一 、 什么是Linux 系统编程&⽹络编程 Linux⾃⾝提供…

适合创业公司使用的wordpress主题

对于创业公司来说,‌选择一个适合的WordPress主题至关重要,‌它不仅能够提升公司网站的外观和用户体验,‌还能帮助优化搜索引擎排名,‌从而吸引更多的潜在客户。‌以下是一些推荐的WordPress主题,‌特别适合创业公司使…

【vue3-命名规范以及注意事项】

使用多字组件名 使用详细的道具定义props 在提交的代码中,prop定义应该总是尽可能详细,至少指定类型。 在声明期间,道具名应该始终使用camelCase。当在in-DOM模板中使用时,props应该是串式的。单文件组件模板和JSX可以使用keba…

【leetcode】整数反转

给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−2^31, 2^31 − 1] ,就返回 0。 假设环境不允许存储 64 位整数(有符号或无符号)。 示例 1: …

C语言丢失精度 如何实现高精度计算

(1)int 类型举例 int :占4个字节,也就是32位,及最大值是2^32-11024*1024*1024*4-14294967295 以上说法错误,因为Int是有符号类型整数,所以最高位是符号位,及int的最大值应该是2^31…

[BJDCTF2020]EasySearch1

知识点: 1.swp泄露 2.md5碰撞 3.PHP代码审计 4.SSI代码执行漏洞 // Apache SSI 远程命令执行漏洞复现 看着像sql注入,不过注入无果,扫一下目录试试~ 发现是swp泄露. SWP文件泄露漏洞是指在使用 Vim编辑器 编辑一个文件时,Vim会在…

​前端Vue自定义签到获取积分弹框组件设计与实现

摘要 随着前端技术的不断演进,开发的复杂性日益凸显。传统的整体式开发方式在面临功能迭代和修改时,常常牵一发而动全身,导致开发效率低下和维护成本高昂。组件化开发作为一种解决方案,通过实现模块的独立开发和维护,…

代码随想录(day6)哈希表-求两个数组的交集

什么是红黑树,参考链接【数据结构】史上最好理解的红黑树讲解,让你彻底搞懂红黑树-CSDN博客 题目: 注意:字典用{}符合、元组用()符号、列表用[]符号 table.get(num,0)1的意思 class Solution(object):def intersection(self, n…

夹子音转换器matlab

操作过程点击此处观看 上段时间补习了一下傅里叶变化的知识,突发奇想可以根据此做一款声音转换器,使用工科神器Matlab进行完成,并且开发了可操作界面如下图所示: 功能实现与描述 软件中可以实现声音的录制、回放、文件的保存与…

vmware workstation 虚拟机安装

vmware workstation 虚拟机安装 VMware Workstation Pro是VMware(威睿公司)发布的一代虚拟机软件,中文名称一般称 为"VMware 工作站".它的主要功能是可以给用户在单一的桌面上同时运行不同的操作系统,它也是可进 行开发…

6-7 宠物领养开发及相关代码

6-7 宠物领养开发及相关代码(react区块链实战) 来到ant-design https://ant.design/index-cn https://ant.design/components/layout-cn/ 来到布局 选择一个简单的布局即可 会显示出所有的相关界面的代码 根据对应界面的代码在我们的react项目woniu-…

接口基础知识3:详解url

课程大纲 一、定义 URL即访问的链接,是Uniform Resource Locator的缩写,译为"统一资源定位符"。 URL是一种URI,它标识一个互联网资源,并指定对其进行操作或获取该资源的方法。可能通过对主要访问手段的描述&#xff0c…

《昇思25天学习打卡营第05天|qingyun201003》

日期 心得 通过本节课的学习,学习到了通过网络获取数据集,处理数据集模型。数据模型层数据变换,模型参数解析和其对应代码中的API进行解析。 昇思MindSpore 基础入门学习 网络构建 (AI 代码解析) 网络构建 神经网络模型是由神经网络层和T…