【前端项目笔记】9 数据报表

数据报表

效果展示:
在这里插入图片描述

在开发代码之前新建分支
git checkout -b report 新建分支report
git branch 查看分支
git push -u origin report 将本地report分支推送到云端origin并命名为report

通过路由的形式将数据报表加载到页面中

在这里插入图片描述
在这里插入图片描述

渲染数据报表基本布局

面包屑导航+卡片视图区域
在这里插入图片描述

基于ECharts在页面上绘制图形区

命令行安装echarts,–save参数是用来确保将echarts包添加到项目的package.json文件的dependencies列表中。

npm install echarts --save

生命周期函数:
beforeMount(): 模板编译/挂载之前被调用,$el 属性仍然不可见。当模板(template)渲染到页面之前会执行。
mounted(): 实例挂载到DOM上之后被调用,这时候可以进行DOM相关的操作。当模板(template)渲染到页面完毕会执行。

在这里插入图片描述
注意需要在DOM元素渲染完毕后才能渲染图表,故使用mounted()生命周期函数
在这里插入图片描述

获取报表数据并将数据替换到图表中进行展示

发起get请求获取折线图的数据
获取到的数据直接进行图表展示会缺少鼠标跟随的效果,需要将文档中提供的options对象与之前获取到的对象进行合并(用lodash中merge函数)
将合并的结果交给图表进行展示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

提交数据报表代码到云端

cls 清屏
git status 查看当前文件的状态
git branch 查看当前分支
git add . 将所有修改的文件添加到暂存区
git commit -m "完成了报表功能的开发" 本地提交代码
git push 本地当前分支代码提交到云端
git checkout master 切换到主分支master
git merge report 合并report分支到master中
git push 本地master代码推送到云端

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

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

相关文章

迭代器模式(大话设计模式)C/C++版本

迭代器模式 C #include <iostream> #include <string> #include <vector>using namespace std;// 迭代抽象类,用于定义得到开始对象、得到下一个对象、判断是否到结尾、当前对象等抽象方法&#xff0c;统一接口 class Iterator { public:Iterator(){};virtu…

Miniconda的常见用法——以Isaacgym为例

1. ubuntu24.04安装minicondda mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh解释下这段代码 bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3~/miniconda3/miniconda.sh: 指向Mi…

宝塔面板运行Admin.net框架

准备 宝塔安装 .netcore安装 Admin.net框架发布 宝塔面板设置 完结撒花 1.准备 服务器/虚拟机一台 系统Windows server / Ubuntu20.04&#xff08;本贴使用的是Ubuntu20.04版本系统&#xff09; Admin.net开发框架 先安装好服务器系统&#xff0c;这里就不做安装过程描述了&…

ATA-8035射频功率放大器在声动力疗法中的应用

声动力疗法是一种基于声波能量的治疗方法&#xff0c;广泛应用于医疗和美容领域。它利用高强度聚焦的声波来实现切割、破碎或加热组织&#xff0c;以治疗各种疾病和美容问题。在声动力疗法中&#xff0c;射频功率放大器起着至关重要的作用&#xff0c;它负责提供足够的能量来激…

☺初识c++(语法篇)☺

目录 一命名空间&#xff08;namespace&#xff09;&#xff1a; 二cout与cin简述&#xff1a; 三缺省参数&#xff1a; 四函数重载&#xff1a; 五引用&#xff1a; 六内联函数: 七c中的nullptr简述&#xff1a; 一命名空间&#xff08;namespace&#xff09;&#xff1…

聚焦云技术,探讨 AGI 时代的云原生数据计算系统

6月22日&#xff0c;开源中国社区在上海举办了 OSC 源创会活动&#xff0c;本期活动以「云技术」为主题&#xff0c;邀请了来自华为 openEuler、字节跳动、AutoMQ 等厂商的技术大咖进行分享&#xff0c;拓数派作为云原生数据计算领域的引领者&#xff0c;受邀参与了本次活动&am…

【IMU】 温度零偏标定

温度标定 IMU的零偏随着温度的变化而变化&#xff0c;在全温范围内形状各异&#xff0c;有些可能是单调的&#xff0c;有些可能出现拐点。 多项式误差温度标定 目的是对估计的参数进行温度补偿&#xff0c;获取不同温度时的参数值&#xff08;零偏、尺度、正交&#xff09;&…

Study--Oracle-06-Oracler网络管理

一、ORACLE的监听管理 1、ORACLE网络监听配置文件 cd /u01/app/oracle/product/12.2.0/db_1/network/admin 2、在Oracle数据库中&#xff0c;监听器&#xff08;Listener&#xff09;是一个独立的进程&#xff0c;它监听数据库服务器上的特定端口上的网络连接请求&#xff0c…

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法&#xff0c;该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…

【机器学习】基于密度的聚类算法:DBSCAN详解

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 基于密度的聚类算法&#xff1a;DBSCAN详解引言DBSCAN的基本概念点的分类聚类过…

计算机图形学入门24:材质与外观

1.前言 想要得到一个漂亮准确的场景渲染效果&#xff0c;不只需要物理正确的全局照明算法&#xff0c;也要了解现实中各种物体的表面外观和在图形学中的模拟方式。而物体的外观和材质其实就是同一个意思&#xff0c;不同的材质在光照下就会表现出不同的外观&#xff0c;所以外观…

idea推送到gitee 401错误

在idea上推送时遇到这样的问题&#xff0c;解决方法如下&#xff1a; 在https://的后面加上 用户名:密码 然后再提交就ok啦&#xff01;

在vue3中,手写父子关联,勾选子级父级关联,取消只取消当前子级,父节点不动

树形控件选择子级勾选父级&#xff0c;以及所有子级&#xff0c; 取消勾选仅取消子级 在项目中&#xff0c;可能会遇到这种场景&#xff0c;比如权限配置的时候&#xff0c;页面权限和菜单权限以tree的形式来配置&#xff0c;而且不用半选&#xff0c;菜单在页面的下面&#xf…

在AvaotaA1全志T527开发板上使用AvaotaOS 部署 Docker 服务

Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有任何接口。 准备…

小白轻松上手,Python编程常用的30个经典操作以及代码演示

当谈到经典的Python编程案例时&#xff0c;通常涉及各种基础和进阶的编程任务. 30个常见的案例&#xff0c;涵盖了从基本操作到稍复杂的应用&#xff1a; 基础操作 1.Hello World: 打印"Hello, World!"到控制台。 print("Hello, World!")2.变量和数据…

【LLM】三、open-webui+ollama搭建自己的聊天机器人

系列文章目录 往期文章回顾&#xff1a; 【LLM】二、python调用本地的ollama部署的大模型 【LLM】一、利用ollama本地部署大模型 目录 前言 一、open-webui是什么 二、安装 1.docker安装 2.源码安装 三、使用 四、问题汇总 总结 前言 前面的文章&#xff0c;我们已经…

一些关于C++的基础知识

引言&#xff1a;C兼容C的大部分内容&#xff0c;但其中仍有许多小细节的东西需要大家注意 一.C的第一个程序 #include <iostream> using namespace std;int main() {cout << "hello world!" << endl;return 0; } 第一次看这个是否感觉一头雾水…

【运维】磁盘满了怎么办?如何快速找到占用空间的文件和腾出空间

机器用久了&#xff0c;很容易生成很多临时或者无用的文件&#xff0c;占用大量空间造成磁盘不够用。尤其是服务器&#xff0c;当磁盘不够用时&#xff0c;系统会出现莫名其妙的问题&#xff0c;数据库可能会造成数据损坏。此时快速定位可以删除的大文件并及时释放空间&#xf…

Python深度学习

原文链接&#xff1a;Python深度学习https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608512&idx1&sn16e2a0bb6b0a1f6b513be173730090c0&chksmfa826927cdf5e031b702deb04eef5cb0055f65b0d6e4c33588949ee81c7380ee044caeafd8c7&token2068755524&am…

如何解决群晖Docker注册表查询失败/无法拉取镜像等问题

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 问题概述 📒📒 解决方案 📒🔖 方法一🔖 方法二🔖 方法三⚓️ 相关链接 🚓️📖 介绍 📖 在群晖(Synology)NAS设备上使用Docker时,我们可能会遇到查询Docker注册表失败,无法拉取Docker镜像的问题。这种情况…