当前位置: 首页 > news >正文

【前端项目笔记】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代码推送到云端

相关文章:

  • 使用AES加密数据传输的iOS客户端实现方案
  • 数据库MySQL学习笔记
  • C++实现简化 QtBase(4):增加简单实用的事件机制
  • Windows/Linux/Mac 系统局域网服务发现协议及传输速度比较
  • uniapp做小程序内打开地图展示位置信息
  • AOP切面、动态代理
  • springcloud-gateway 网关组件中文文档
  • c++11新特性-4-返回类型后置
  • Flutter循序渐进==>基金管理APP首页
  • JAVA学习-练习试用Java实现“编辑距离”
  • 数据驱动下的SaaS渠道精细化运营:提升ROI的实战指南
  • 【Hive实战】Linux磁盘空间不足导致HiveSession创建失败
  • 技术成神之路:设计模式(二)建造者模式
  • 第二节:如何使用thymeleaf渲染html(自学Spring boot 3.x的第一天)
  • LeetCode 每日一题 2024/6/24-2024/6/30
  • ES6指北【2】—— 箭头函数
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • canvas 五子棋游戏
  • JavaScript实现分页效果
  • October CMS - 快速入门 9 Images And Galleries
  • Promise面试题,控制异步流程
  • springMvc学习笔记(2)
  • 解析 Webpack中import、require、按需加载的执行过程
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 名企6年Java程序员的工作总结,写给在迷茫中的你!
  • 十年未变!安全,谁之责?(下)
  • 微信小程序开发问题汇总
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 小程序 setData 学问多
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 一道面试题引发的“血案”
  • 一天一个设计模式之JS实现——适配器模式
  • 云大使推广中的常见热门问题
  • 2017年360最后一道编程题
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢?交流转换到直流(整流器)直流变交流(逆变器)​
  • # 安徽锐锋科技IDMS系统简介
  • (02)vite环境变量配置
  • (04)Hive的相关概念——order by 、sort by、distribute by 、cluster by
  • (HAL库版)freeRTOS移植STMF103
  • (翻译)terry crowley: 写给程序员
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • ..thread“main“ com.fasterxml.jackson.databind.JsonMappingException: Jackson version is too old 2.3.1
  • .bat文件调用java类的main方法
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .net mvc 获取url中controller和action
  • .net 反编译_.net反编译的相关问题
  • .net6 webapi log4net完整配置使用流程
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...
  • .NET中winform传递参数至Url并获得返回值或文件
  • .sys文件乱码_python vscode输出乱码
  • /bin/bash^M: bad interpreter: No such file or directory