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

news2024/11/26 22:21:13

数据报表

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

在开发代码之前新建分支
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.coloradmin.cn/o/1897569.html

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

相关文章

总结一下 .NET FrameWork 和 .NET Core 创建的项目的不同点

前言 从 Visual Studio 2022 开始,微软开始淡化 .NET Framework 的概念,在项目向导中,只有使用带 “.NET Framework” 的项目模板创建的才是 .NET Framework 项目,使用其他模板创建的都是 .NET Core 项目 比如,如果你…

【数据结构】06.栈队列

一、栈 1.1栈的概念及结构 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。 压栈&#…

数据结构--单链表实现

欢迎光顾我的homepage 前言 链表和顺序表都是线性表的一种,但是顺序表在物理结构和逻辑结构上都是连续的,但链表在逻辑结构上是连续的,而在物理结构上不一定连续;来看以下图片来认识链表与顺序表的差别 这里以动态顺序表…

《梦醒蝶飞:释放Excel函数与公式的力量》8.8 STDEVP函数

8.8 STDEVP函数 STDEVP函数是Excel中用于计算总体数据的标准偏差的函数。标准偏差是统计学中的一个重要指标,用于衡量数据集中各数值偏离平均值的程度。总体标准偏差考虑了整个数据集,而不是样本。 8.8.1 函数简介 STDEVP函数用于返回总体数据的标准偏…

Java实现日志全链路追踪.精确到一次请求的全部流程

广大程序员在排除线上问题时,会经常遇见各种BUG.处理这些BUG的时候日志就格外的重要.只有完善的日志才能快速有效的定位问题.为了提高BUG处理效率.我决定在日志上面优化.实现每次请求有统一的id.通过id能获取当前接口的全链路流程走向. 实现效果如下: 一次查询即可找到所有关…

前端面试题13(API请求方法)

在前端JavaScript中,进行API请求主要可以通过几种方式来实现,最常见的是使用XMLHttpRequest(较旧的方法)、fetch(现代浏览器推荐方法)以及使用第三方库如axios或jQuery.ajax等。 1. XMLHttpRequest 这是最…

MPI hello world SSH 免密互联

目标: 我们想实现2台主机免密互联,将MPI Hello World跑起来 假设hostname是node01,node02,(Linux shell窗口一般是UserNameHostName,node1和node2一定要和HostName一样) hostname是/etc/hosts中的配置,如下…

工地/矿区/电力/工厂/环卫视频智能安全监控反光衣AI检测算法的原理及场景应用

一、引言 随着科技的快速发展,特别是在智能交通和安全生产领域,对于夜间或弱光环境下的人员识别和安全监控需求日益凸显。反光衣作为一种重要的安全装备,被广泛应用于道路施工、工地作业、夜间巡逻、安全生产等场景,旨在提高人员的…

【CUDA】 矩阵乘法 matMatMul

矩阵乘法 matMatMul 矩阵乘法是基本线性代数子程序(BLAS)的重要组成部分,而且线性代数中许多其他操作以此为基础。 图1是两个矩阵的乘法。 基础方法,正方形tile和长方形tile 基础方法 执行矩阵乘法的基础方法是使用单个线程执…

2021-06-15 protues(ISIS)脉冲发生器仿真仪表使用

缘由这个脉冲发生器怎么连线_编程语言-CSDN问答

STM32智能交通管理系统教程

目录 引言环境准备智能交通管理系统基础代码实现:实现智能交通管理系统 4.1 数据采集模块 4.2 数据处理与分析 4.3 控制系统实现 4.4 用户界面与数据可视化应用场景:交通管理与优化问题解决方案与优化收尾与总结 1. 引言 智能交通管理系统利用STM32嵌…

【对顶堆 优先队列】295. 数据流的中位数

本文涉及知识点 对顶堆 优先队列 LeetCode295. 数据流的中位数 中位数是有序整数列表中的中间值。如果列表的大小是偶数,则没有中间值,中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。 例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 …

网络漏洞挖掘实测报告

关于作者:个人主页 网络漏洞挖掘实测报告 一、前言 网络漏洞挖掘是信息安全领域中至关重要的一环。通过挖掘和修复漏洞,可以有效地保护系统免受潜在的攻击和破坏。本报告旨在记录一次完整的网络漏洞挖掘实测过程,包括实施方法、过程、结果以…

免杀笔记 ----> ShellCode Loader !!!

学了那么久的前置知识,终于到了能上线的地方了!!! 不过这里还没到免杀的部分,距离bypass一众的杀毒软件还有很长的路要走!! 目录 1.ShellCode 2.ShellCode Loader的概念 3.可读可写可…

Android实现获取本机手机号码

和上次获取设备序列号一样,仍然是通过无障碍服务实现,在之前的代码基础上做了更新。代码和demo如下: package com.zwxuf.lib.devicehelper;import android.accessibilityservice.AccessibilityService; import android.app.Activity; import…

Java中使用arima预测未来数据

看着已经存在的曲线图数据,想预估下后面曲线图的数据。 import java.util.Vector;public class AR {double[] stdoriginalData{};int p;ARMAMath armamathnew ARMAMath();/*** AR模型* param stdoriginalData* param p //p为MA模型阶数*/public AR(double [] stdori…

Dungeonborne延迟高?降低Dungeonborne延迟的方法分享

Dungeonborne是Mithril Interactive开发并发行的一款沉浸式第一人称 PvPvE 地下城探险游戏。Dungeonborne的魅力并不仅仅在于战斗和冒险。游戏中的剧情设计同样引人入胜,每个NPC都有自己独特的故事和背景,玩家在与他们交流的过程中,不仅能了解…

Tomcat(+Servlet)笔记+代码

Tomcat安装和配置 安装在不含中文的路径,路径不能太长 Apache 官网👇 Apache Tomcat - Welcome! 配置部分 点击下图红框处,找到Tomcat安装位置 添加项目的文件 配好的话,红框这里有个猫 代码部分 新建jsp文件,里…

【码银送书第二十二期】《Python数据分析从入门到精通(第2版)》

💐大家好!我是码银~,欢迎关注💐: CSDN:码银 公众号:码银学编程 前言 🍀丛书说明:“软件开发视频大讲堂‘’丛书第1版于2008年8月出版,因其编写细腻、易学实用…

字符串函数5-9题(30 天 Pandas 挑战)

字符串函数 1. 相关知识点1.5 字符串的长度条件判断1.6 apply映射操作1.7 python大小写转换1.8 正则表达式匹配2.9 包含字符串查询 2. 题目2.5 无效的推文2.6 计算特殊奖金2.7 修复表中的名字2.8 查找拥有有效邮箱的用户2.9 患某种疾病的患者 1. 相关知识点 1.5 字符串的长度条…