【前端项目笔记】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.mzph.cn/web/40155.shtml

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

相关文章

数据洞察:从零到一的数据仓库与Navicat连接全攻略【实训Day04】[完结篇]

一、数据分析 1 实现数据仓库(在hadoop101上) 1) 创建jobdata数据库 # cd $HIVE_HOME # bin/hive hive>create database jobdata; hive>use jobdata; 2) 创建原始职位数据事实表ods_jobdata_orgin(在hadoop101上) create table ods_jobdata_origin( city string CO…

Keepalived+LVS实现负责均衡,高可用的集群

Keepalived的设计目标是构建高可用的LVS负载均衡群集,可以调用ipvsadm工具来创建虚拟服务器,管理服务器池,而不仅仅用作双机热备。使用Keepalived构建LVS群集更加简便易用,主要优势体现在:对LVS负责调度器实现热备切换…

配置并调试后端程序(sql)

1.环境准备 安装VS Code和Node.js插件:确保你已经安装了VS Code和Node.js插件。创建launch.json文件:在你的项目中创建一个.vscode文件夹,并在其中创建launch.json文件。添加以下内容: {"version": "0.2.0"…

uniapp 数据父传子

文章目录 可能出现的问题 在uni-app中,父组件向子组件传递数据主要通过属性绑定的方式实现。这里提供一个简单的示例来说明如何进行父传子的数据传递: 父组件 准备数据: 在父组件的data中定义要传递的数据。 export default {data() {return {parentMe…

PLC基础知识

1.PLC中的数据寄存器地址D表示存数据的地方。 2.PLC的物理存储器的规定:PLC存储器以字节为单位(Byte),存储单元以位(Bit)、字节(B,8Bit)、字(W,1…

电子行业MES系统解决方案

工业4.0时代的工业自动化,将在原有自动化技术和架构下,实现集中式控制向分散式增强型控制的基本模式转变,让设备从传感器到因特网的通讯能够无缝对接,从而建立一个高度灵活的、个性化和数字化、融合了产品与服务的生产模式。在这种…

spark shuffle写操作——BypassMergeSortShuffleWriter

创建分区文件writer 每一个分区都生成一个临时文件,创建DiskBlockObjectWriter对象,放入partitionWriters 分区writer写入消息 遍历所有消息,每一条消息都使用分区器选择对应分区的writer然后写入 生成分区文件 将分区writer的数据flu…

从海上长城到数字防线:视频技术在海域边防现代化中的创新应用

随着全球化和科技发展的加速,海域安全问题日益凸显其重要性。海域边防作为国家安全的第一道防线,其监控和管理面临着诸多挑战。近年来,视频技术的快速发展为海域边防场景提供了新的解决方案,其高效、实时、远程的监控特点极大地提…

如何快速开展每日待办工作 待办任务高效管理

每天,我们都需要处理大量的待办工作,如何高效有序地开展这些工作成为了我们必须要面对的问题。仅仅依靠个人的记忆和脑力去管理这些繁杂的事务,显然是一项艰巨的挑战。在这个时候,如果能有一款实用的待办工具来辅助我们&#xff0…

如何使用C++调用Pytorch模型进行推理测试:使用libtorch库

如何使用C调用Pytorch模型进行推理测试:使用libtorch库 目录 如何使用C调用Pytorch模型进行推理测试:使用libtorch库一、环境准备1,linux:以ubuntu 22.04系统为例1. 准备CUDA和CUDNN2. 准备C环境3, 下载libtorch文件4, 编写测试li…

期权学习必看圣书:《3小时快学期权》要在哪里看?

今天带你了解期权学习必看圣书:《3小时快学期权》要在哪里看?《3小时快学期权》是一本关于股票期权基础知识的书籍。 它旨在通过简明、易懂的语言和实用的案例,让读者在短时间内掌握股票期权的基本概念、操作方法和投资策略。通过这本书&…

Linux系统(CentOS)安装Mysql5.7.x

安装准备: Linux系统(CentOS)添加防火墙、iptables的安装和配置 请访问地址:https://blog.csdn.net/esqabc/article/details/140209894 1,下载mysql安装文件(mysql-5.7.44为例) 选择Linux通用版本64位(L…

算力互联网网络架构;SRV6;智享WAN

目录 算力互联网网络架构 SRV6 主要特点 应用场景 结论 G-SRV6 多层次网络切片 智享WAN 一、定义与背景 二、关键技术 三、应用场景与优势 四、发展现状与未来展望 智能算力网络成为智能经济时代代表性数字基础设施 算力互联网网络架构 为构建算力互联网这个前瞻性…

后端之路——阿里云OSS云存储

一、何为阿里云OSS 全名叫“阿里云对象存储OSS”,就是云存储,前端发文件到服务器,服务器不用再存到本地磁盘,可以直接传给“阿里云OSS”,存在网上。 二、怎么用 大体逻辑: 细分的话就是: 1、准…

JavaSE (Java基础):面向对象(下)

8.7 多态 什么是多态? 即同一方法可以根据发送对象的不同而采用多种不同的方式。 一个对象的实际类型是确定的,但可以指向对象的引用的类型有很多。在句话我是这样理解的: 在实例中使用方法都是根据他最开始将类实例化最左边的类型来定的&…

消息中间件ApacheKafka在windows简单安装

一.背景 之前公司需要API网关管理软件ApacheShenYu,我相信把调用的记录都存到一个数据库。他支持日志推送到kafka,所以,我准备尝试一下通过kafka接收调用的日志信息。第一步,当然是安装kafka了。 二.ApacheKafka的下载 打开下载…

【C++】 解决 C++ 语言报错:Memory Leak

文章目录 引言 内存泄漏(Memory Leak)是 C 编程中常见且严重的内存管理问题之一。当程序分配了内存而没有正确释放,导致内存无法被重新利用时,就会发生内存泄漏。这种错误会导致程序占用越来越多的内存,最终可能导致系…

论文学习——动态多目标优化的一种新的分位数引导的对偶预测策略

论文题目:A novel quantile-guided dual prediction strategies for dynamic multi-objective optimization 动态多目标优化的一种新的分位数引导的对偶预测策略(Hao Sun a,b, Anran Cao a,b, Ziyu Hu a,b, Xiaxia Li a,b, Zhiwei Zhao c)In…

“免费”的可视化大屏案例分享-智慧园区综合管理平台

一.智慧园区是什么? 智慧园区是一种融合了新一代信息与通信技术的先进园区发展理念。它通过迅捷信息采集、高速信息传输、高度集中计算、智能事务处理和无所不在的服务提供能力,实现了园区内及时、互动、整合的信息感知、传递和处理。这样的园区旨在提高…

正确使用Pytorch Geometric打开Cora(Planetoid)数据集

文章目录 关于报错("Cannot connect to host")解决方法 关于报错(“Cannot connect to host”) 我们在使用PyG调用Planetoid数据集的时候,常会碰到如下报错: 解决方法就是手动下载这个数据集。…