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

数据报表

效果展示:

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

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


渲染数据报表基本布局

面包屑导航+卡片视图区域

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

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

javascript 复制代码
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代码推送到云端

相关推荐
li理4 分钟前
鸿蒙 Next 布局开发实战:6 大核心布局组件全解析
前端
EndingCoder5 分钟前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
li理7 分钟前
鸿蒙 Next 布局大师课:从像素级控制到多端适配的实战指南
前端
前端赵哈哈11 分钟前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
Nicholas6818 分钟前
flutter滚动视图之ScrollView源码解析(五)
前端
hello_ world.18 分钟前
k8s笔记04-常用部署命令
笔记·容器·kubernetes
电商API大数据接口开发Cris20 分钟前
Go 语言并发采集淘宝商品数据:利用 API 实现高性能抓取
前端·数据挖掘·api
ITMan彪叔20 分钟前
Nodejs打包 Webpack 中 __dirname 的正确配置与行为解析
javascript·后端
风中凌乱的L25 分钟前
vue 一键打包上传
前端·javascript·vue.js
GHOME29 分钟前
Vue2与Vue3响应式原理对比
前端·vue.js·面试