【前端項目筆記】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.pswp.cn/web/40155.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/40155.shtml
英文地址,請注明出處:http://en.pswp.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…

@ControllerAdice統一返回值類型【Spring源碼學習】

我們可以通過在ControllerAdvice注解類上實現ResponseBodyAdvice注解來實現統一返回值類型&#xff1b; 例如統一接口的返回類型為Result類 ControllerAdvice static class MyControllerAdvice implements ResponseBodyAdvice<Object> {Overridepublic boolean supports…

PLC基礎知識

1.PLC中的數據寄存器地址D表示存數據的地方。 2.PLC的物理存儲器的規定&#xff1a;PLC存儲器以字節為單位&#xff08;Byte&#xff09;&#xff0c;存儲單元以位&#xff08;Bit&#xff09;、字節&#xff08;B&#xff0c;8Bit&#xff09;、字&#xff08;W&#xff0c;1…

谷歌優化師招聘網站:夢想啟航的舞臺,實現職業理想的起點

尊敬的夢想實踐者們&#xff0c;歡迎您走進谷歌優化師招聘網站這個充滿魔力的領域。這里不僅是一個招聘平臺&#xff0c;更是您實現職業理想的起點&#xff0c;激發熱情的舞臺。現在&#xff0c;請做好準備&#xff0c;與我們共同揭開這個神秘世界的面紗&#xff01; 夢想啟航…

電子行業MES系統解決方案

工業4.0時代的工業自動化&#xff0c;將在原有自動化技術和架構下&#xff0c;實現集中式控制向分散式增強型控制的基本模式轉變&#xff0c;讓設備從傳感器到因特網的通訊能夠無縫對接&#xff0c;從而建立一個高度靈活的、個性化和數字化、融合了產品與服務的生產模式。在這種…

上海市計算機學會競賽平臺2022年11月月賽丙組染色問題

題目描述 &#x1d45b;n 個點排成一列&#xff0c;需要給每個點一個顏色&#xff0c;顏色有 &#x1d45a;m 種。請問有多少種方法&#xff0c;能使任意相鄰兩個點的顏色均不相同&#xff1f; 輸入格式 兩個整數&#xff1a;表示 &#x1d45b;n 與 &#x1d45a;m 輸出格…

【控制Android.bp的編譯】

1.首先Android.bp的語法是不支持if 條件語句的 2.查到可以用enabled來控制Android.bp中的模塊是否參與編譯&#xff0c;但是并不能實現動態的控制&#xff0c;比如你需要根據獲取到的安卓版本來控制一個Android.bp是否編譯&#xff0c;是無法做到的。enabled只能是固定的true或…

spark shuffle寫操作——BypassMergeSortShuffleWriter

創建分區文件writer 每一個分區都生成一個臨時文件&#xff0c;創建DiskBlockObjectWriter對象&#xff0c;放入partitionWriters 分區writer寫入消息 遍歷所有消息&#xff0c;每一條消息都使用分區器選擇對應分區的writer然后寫入 生成分區文件 將分區writer的數據flu…

Java中初始化一個List的多種方式

1.最原始的方式&#xff1a;先創建&#xff0c;然后再添加元素 List<String> list new ArrayList<>(); list.add("apple"); list.add("banana"); list.add("cherry");2.使用Arrays.asList 這是一種快速方便的方式&#xff0c;直接…

從海上長城到數字防線:視頻技術在海域邊防現代化中的創新應用

隨著全球化和科技發展的加速&#xff0c;海域安全問題日益凸顯其重要性。海域邊防作為國家安全的第一道防線&#xff0c;其監控和管理面臨著諸多挑戰。近年來&#xff0c;視頻技術的快速發展為海域邊防場景提供了新的解決方案&#xff0c;其高效、實時、遠程的監控特點極大地提…

面試八股Day1

JavaSE&#xff08;回顧&#xff09; 什么是java? java跟c的區別&#xff1f;Java語言有哪些特點&#xff1f;JVM、JDK和JRE有什么區別&#xff1f;什么是跨平臺性&#xff1f;原理是什么&#xff1f;什么是字節碼&#xff1f;采用字節碼的好處是什么&#xff1f; 說說Java程…

如何快速開展每日待辦工作 待辦任務高效管理

每天&#xff0c;我們都需要處理大量的待辦工作&#xff0c;如何高效有序地開展這些工作成為了我們必須要面對的問題。僅僅依靠個人的記憶和腦力去管理這些繁雜的事務&#xff0c;顯然是一項艱巨的挑戰。在這個時候&#xff0c;如果能有一款實用的待辦工具來輔助我們&#xff0…

深入理解Spring應用中的初始化和清理代碼執行方式

目錄 引言使用PostConstruct和PreDestroy注解 PostConstructPreDestroy 實現InitializingBean和DisposableBean接口 afterPropertiesSet()destroy() 使用init-method和destroy-method屬性 init-methoddestroy-method 使用Bean注解的initMethod和destroyMethod屬性 initMethodd…

【高級篇】第8章 Elasticsearch 安全與權限管理

在深入探討Elasticsearch高級應用的征途中,我們無法忽視其核心——安全與權限管理的重要性。此章節將為你全面剖析如何構建一個既強大又安全的數據搜索與分析平臺。本章內容將圍繞X-Pack的強大功能展開,深入用戶與角色管理的實踐,以及如何利用SSL/TLS加密來強化數據傳輸的安…

如何使用C++調用Pytorch模型進行推理測試:使用libtorch庫

如何使用C調用Pytorch模型進行推理測試&#xff1a;使用libtorch庫 目錄 如何使用C調用Pytorch模型進行推理測試&#xff1a;使用libtorch庫一、環境準備1&#xff0c;linux&#xff1a;以ubuntu 22.04系統為例1. 準備CUDA和CUDNN2. 準備C環境3, 下載libtorch文件4, 編寫測試li…

期權學習必看圣書:《3小時快學期權》要在哪里看?

今天帶你了解期權學習必看圣書&#xff1a;《3小時快學期權》要在哪里看&#xff1f;《3小時快學期權》是一本關于股票期權基礎知識的書籍。 它旨在通過簡明、易懂的語言和實用的案例&#xff0c;讓讀者在短時間內掌握股票期權的基本概念、操作方法和投資策略。通過這本書&…

img的onload事件不觸發

var img new Image(); img.src "圖片地址" img.addEventListener(load, function() {// 加載完后的處理 }, false);上面的代碼&#xff0c;可能存在設置addEventListener之前&#xff0c;圖片已經加載完了&#xff0c;onload事件不處罰。 調換一下img.src和img.add…