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

之前: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栏,点源码就可以看到完整的源代码,点效果就可以看到最终的图表渲染效果。这样方便学习!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud代码实战

项目结构 实例实现功能:实现通过id查询用户的订单信息 OrderCommon:公共的一些模块类型,此处为一个user对象 Eureka-Service:配置Eureka的启动类,服务端 Order-Service:提供查询功能的服务端 Order-Client:查询的客户端 OrderCommon代码…

西安明德理工学院师生莅临泰迪智能科技开展参观见习活动

为进一步深化校企合作,落实高校应用型人才培养。7月8日,西安明德理工学院与广东泰迪智能科技股份有限公司联合开展学生企业见习活动。西安明德理工学院金融产业学院副院长刘敏、金融学专业负责人张莉萍、金融学专业教师曹艳飞、赵浚妤、泰迪智能科技董事…

软件架构之架构风格

软件架构之架构风格 9.3 软件架构风格9.3.1 软件架构风格分类9.3.2 数据流风格9.3.3 调用/返回风格9.3.4 独立构件风格9.3.5 虚拟机风格9.3.6 仓库风格 9.4 层次系统架构风格9.4.1 二层及三层 C/S 架构风格9.4.2 B/S 架构风格9.4.3 MVC 架构风格9.4.4 MVP 架构风格 9.5 面向服务…

【日常记录】【插件】js 获取浏览器信息、操作系统等相关信息

文章目录 1. 原生方式2. 插件的方式2.1 Bowser 的基本使用2.2 UAParser2.3 Platform.js 参考链接 1. 原生方式 原生方式可以通过 navigator.userAgent 来获取 需要写一个正则来匹配,获取相关的信息 2. 插件的方式 获取浏览器版本相关信息的库主要有以下几个 Bowser&…

01MFC建立单个文件类型——画线

文章目录 选择模式初始化文件作用解析各初始化文件解析类导向创建鼠标按键按下抬起操作函数添加一个变量记录起始位置注意事项代码实现效果图虚实/颜色线选择模式 初始化文件作用解析 运行: 各初始化文件解析 MFC(Microsoft Foundation Classes)是一个C++类库,用于在Win…

力扣 双指针基础

class Solution {public void moveZeroes(int[] nums) {int l 0;//慢指针但先走for (int r 0; r < nums.length; r) {//快指针&#xff0c;遍历次数if (nums[r] 0) continue;//l比r先到&#xff0c;在此处定住l&#xff0c;r继续移动int t nums[l];nums[l] nums[r];num…

今天小编强烈推荐几款国产APP!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 今天小编强烈推荐几款国产APP,算得上是国产之光。如果能帮助到大家&#xff0c;别忘了给小编点点赞加关注哟&#xff01;更多精彩还在后面。 一、…

节点流与处理流:深入解析Java中的IO流

节点流与处理流&#xff1a;深入解析Java中的IO流 1、节点流&#xff08;Node Stream&#xff09;1.1 定义1.2 好处1.3 示例 2、处理流&#xff08;Processing Stream&#xff09;2.1 定义2.2 好处2.3 创建特征2.4 示例 3、总结 &#x1f496;The Begin&#x1f496;点点关注&…

关于string的‘\0‘与string,vector构造特点,反迭代器与迭代器类等的讨论

目录 问题一&#xff1a;关于string的\0问题讨论 问题二&#xff1a;C标准库中的string内存是分配在堆上面吗&#xff1f; 问题三&#xff1a;string与vector的capacity大小设计的特点 问题四&#xff1a;string的流提取问题 问题五&#xff1a;迭代器失效 问题六&#xf…

05_Shell索引数组

05_Shell索引数组 数组定义 #!/bin/basharr(1 2 3 "www.baidu.com")获取数组元素 #!/bin/basharr(1 2 3 "www.baidu.com")#通过下表获取元素 下标从1开始 ${arr[1]}#获取数组所有元素 ${arr[*]} 或者 ${arr[]}#获取数组长度 ${#arr[*]} 或者 ${#arr[*]}#获…

LeetCode(2)合并链表、环形链表的约瑟夫问题、链表分割

一、合并链表 . - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ typedef struct ListNode ListNode; struct ListNode* mergeTwoLists(struct …

选择最佳工具:评估8款顶级App界面设计软件

在如今的数字化时代&#xff0c;设计师也离不开各种界面设计软件来辅助自己的设计工作。在各种界面设计软件的帮助下&#xff0c;设计师们能够更好、更快地完成自己的设计工作。而今天本文要为大家推荐的这 8 款界面设计软件&#xff0c;分别是国产APP界面设计软件、Figma、Ske…

【数据库】Redis主从复制、哨兵模式、集群

目录 一、Redis的主从复制 1.1 主从复制的架构 1.2 主从复制的作用 1.3 注意事项 1.4 主从复制用到的命令 1.5 主从复制流程 1.6 主从复制实现 1.7 结束主从复制 1.8 主从复制优化配置 二、哨兵模式 2.1 哨兵模式原理 2.2 哨兵的三个定时任务 2.3 哨兵的结构 2.4 哨…

校园外卖系统带万字文档在线外卖管理系统java项目java课程设计java毕业设计

文章目录 校园外卖系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档&#xff08;9.9&#xffe5;带走&#xff09; 校园外卖系统 一、项目演示 校园外卖服务系统 二、项目介绍 语言&#xff1a;java 数据库&…

ARM功耗管理标准接口之ACPI

安全之安全(security)博客目录导读 思考&#xff1a;功耗管理有哪些标准接口&#xff1f;ACPI&PSCI&SCMI&#xff1f; Advanced Configuration and Power Interface Power State Coordination Interface System Control and Management Interface ACPI可以被理解为一…

2023年高教杯数学建模2023B题解析(仅从代码角度出发)

前言 最近博主正在和队友准备九月的数学建模,在做往年的题目&#xff0c;博主主要是负责数据处理&#xff0c;运算以及可视化&#xff0c;这里分享一下自己部分的工作,相关题目以及下面所涉及的代码后续我会作为资源上传 问题求解 第一题 第一题的思路主要如下&#xff1a;…

单链表--续(C语言详细版)

2.6 在指定位置之前插入数据 // 在指定位置之前插入数据 void SLTInsert(SLTNode** pphead, SLTNode* pos, SLTDataType x); 分为两种情况&#xff1a;1. 插入的数据在链表中间&#xff1b;2. 插入的数据在链表的前面。 // 在指定位置之前插入数据 void SLTInsert(SLTNode** …

TISAX认证是什么?

TISAX认证是一种针对汽车行业数据安全和隐私保护的评估认证&#xff0c;其全称在不同资料中有所差异&#xff0c;但普遍认可的是它作为汽车行业信息安全评估体系的重要性。以下是对TISAX认证的详细解读&#xff1a; 一、背景和目的 随着汽车技术的不断发展&#xff0c;汽车数…

MySQL—统计函数和数学函数以及GROUP BY配合HAVING

合计/统计函数 count -- 演示 mysql 的统计函数的使用 -- 统计一个班级共有多少学生&#xff1f; SELECT COUNT(*) FROM student -- 统计数学成绩大于 90 的学生有多少个&#xff1f; SELECT COUNT(*) FROM student WHERE math > 90 -- 统计总分大于 250 的人数有多少&…

git-工作场景

1. 远程分支为准 强制切换到远程分支并忽略本地未提交的修改 git fetch origin # 获取最新的远程分支信息 git reset --hard origin/feature_server_env_debug_20240604 # 强制切换到远程分支&#xff0c;并忽略本地修改 2. 切换分支 1. **查看所有分支&#xff1a;**…