关于前端数据库可视化库的选择,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栏,点源码就可以看到完整的源代码,点效果就可以看到最终的图表渲染效果。这样方便学习!!!

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

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

相关文章

W外链短网址平台怎么样?抖音/小红书/快手/微信卡片生成

在当今数字化时代,网址的便捷性和易记性对于用户体验和网站推广至关重要。短网址技术应运而生,以其简洁、易记、方便分享的特性,逐渐成为网站优化和推广的重要手段之一。其中,W外链作为一个功能全面的短网址服务平台,以…

一文彻底搞懂性能测试

性能测试概念 我们经常看到的性能测试概念,有人或称之为性能策略,或称之为性能方法,或称之为性能场景分类,大概可以看到性能测试、负载测试、压力测试、强度测试等一堆专有名词的解释。 针对这些概念,我不知道你看到的…

react 组件通信 —— 父子传值 【 函数式/类式 】

1、函数式组件通信 父子间通信 —— 父传子 父组件 export default function father() {return (<div style{{width:400px,height:200px,background:pink,marginLeft:500px}}>我是父组件<hr /><Son name{"韩小刀"}/></div>) } 子组件 ex…

刷代码随想录有感(131):动态规划——回文子串

题干&#xff1a; 代码&#xff1a; class Solution { public:int countSubstrings(string s) {vector<vector<bool>>dp(s.size(), vector<bool>(s.size(), false));int res 0;for(int i s.size() - 1; i > 0; i--){for(int j i; j < s.size(); j)…

[leetcode] shortest-subarray-with-sum-at-least-k 和至少为 K 的最短子数组

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int shortestSubarray(vector<int>& nums, int k) {int n nums.size();vector<long> preSumArr(n 1);for (int i 0; i < n; i) {preSumArr[i 1] preSumArr[i] nums[i];}int res n…

获取商铺信息,以及商铺信息的增删改查

本文章主要讲述如何对商铺信息进行基本的增删改查操作&#xff0c;及数据库对比。 1、获取首页仪表盘统计数据接口 待收费金额&#xff1a; SELECT count(1) as count,IFNULL(sum(total),0)as sum FROM payment_bill WHERE enabled_mark 1 AND pay_state0 欠费数据&#xf…

2970. 统计移除递增子数组的数目 I

解题思路 本题中的子数组&#xff0c;称为递增子数组。 子数组指的是一个数组中一段连续的数组序列。 假设nums的长度为n&#xff0c;则nums的子数组的个数为 n ( n 1 ) 2 \frac{n\times(n1)}{2} 2n(n1)​。 因此只需要找出不满足的递增子数组即可。 python class Solutio…

C++基础编程100题-021 OpenJudge-1.4-01 判断数正负

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0104/01/ 描述 给定一个整数N&#xff0c;判断其正负。 输入 一个整数N(-109 < N < 109) 输出 如果N > 0, 输出positive; 如果N 0, 输出zero; 如果N < 0, 输出negative 样例输入 1样例输出…

MySQL 程序简介

以下是常用的 MySQL 程序 程序名作用 mysqldMySQL 的守护进程&#xff0c;即 MySQL 服务器&#xff0c;若要使用 mysql 服务&#xff0c;那么 mysqld 必须处在运行状态 mysqlMySQL 客户端程序&#xff0c;用户交互式输入 SQL 语句或以批处理模式从文件执行 SQL 的命令行…

【Neo4j】实战 (数据库技术丛书)学习笔记

Neo4j实战 (数据库技术丛书) 第1章演示了应用Neo4j作为图形数据库对改进性能和扩展性的可能性, 也讨论了对图形建模的数据如何正好适应于Neo4j数据模型,现在到了该动 手实践的时间了。第一章 概述 Neo4j将数据作为顶点和边存储(或者用Neo4j术语,节点和关系存 储)。用户被定…

原生android的内存性能提升方面的测试和优化方案大致设计

一 测试目标&#xff1a; 以满足用户设备的内存性能和不杀后台为目标。 1&#xff1a;满足用户设备的内存性能是指不出现因为内存原因导致的安卓设备死机&#xff0c;卡顿等问题。 2&#xff1a;满足不杀后台是指整个设备使用时&#xff0c;不出现后台app被杀。 通常是估算如果…

Pytorch版本、安装和检验

基于conda包的环境创建、激活、管理与删除 CUDA版本 CUDA 是 NVIDIA 专为图形处理单元 (GPU) 上的通用计算开发的并行计算平台和编程模型&#xff0c;CUDA版本需满足对应的Pytorch要求 进入NVIDIA控制面板 进入左下角“系统信息”&#xff0c;找到组件 “NVIDIA CUDA 12.3.10…

7. 有奖猜谜

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小明很喜欢猜谜语。 最近&#xff0c;他被邀请参加了 X 星球的猜谜活动。 每位选手开始的时候都被发给 777777 个电子币。 规则是&#xff1a;猜对了&#xff0c;手…

PostgreSQL关闭数据库服务的三种模式

PostgreSQL 提供了三种关闭数据库服务的不同方式&#xff0c;它们最终都是发送一个关闭信号到 postgres 主服务进程。 智能关闭模式 智能关闭&#xff08;Smart Shutdown&#xff09;模式向 postgres 主服务进程发送一个 SIGTERM 信号。此时服务器不允许新的客户端连接&#…

DNS 杂谈

一、定义 DNS&#xff08;Domain Name System&#xff09;&#xff0c;域名系统&#xff0c;该系统记录域名和Ip地址的相互映射关系。用户访问互联网时&#xff0c;通过域名地址得到对应的IP地址&#xff0c;这个过程称为域名解析。DNS运行于UDP协议之上&#xff0c;使用的端口…

手撸俄罗斯方块(一)——简单介绍

手撸俄罗斯方块 简单介绍 《俄罗斯方块》&#xff08;俄语&#xff1a;Тетрис&#xff0c;英语&#xff1a;Tetris&#xff09;&#xff0c;是1980年末期至1990年代初期风靡全世界的电脑游戏&#xff0c;是落下型益智游戏的始祖&#xff0c;电子游戏领域的代表作之一&a…

【代码随想录】【算法训练营】【第64天】 [卡码117]软件构建 [卡码47]参加科学大会

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 64&#xff0c;周三&#xff0c;继续ding~ 题目详情 [卡码117] 软件构建 题目描述 卡码117 软件构建 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 [卡码…

算法的复杂度

文章目录 一、算法的效率1、复杂度的概念2、复杂度的重要性 二、时间复杂度三、空间复杂度四、大O的渐进表示发五、计算复杂度案例1、计算Func1函数的复杂度2、计算Fun2的时间复杂度3、计算Func3的时间复杂度4、计算Func4的时间复杂度5、计算strchr的时间复杂度6、计算Func5的时…

大模型/NLP/算法面试题总结5——Transformer和Rnn的区别

Transformer 和 RNN&#xff08;循环神经网络&#xff09;是两种常见的深度学习模型&#xff0c;广泛用于自然语言处理&#xff08;NLP&#xff09;任务。 它们在结构、训练方式以及处理数据的能力等方面有显著的区别。以下是它们的主要区别&#xff1a; 架构 RNN&#xff0…

MySQL空间索引

空间类型是建立在空间类型字段上的。 空间类型 MySQL的空间类型很多&#xff0c;我就不逐一介绍了。重要分四大类&#xff1a; GeometryCurveSurfaceGeometryCollection 前三种&#xff0c;地理、曲线、曲面都是不可实例化的。Geometry有一个子类Point, Curve有一个直接子类L…