《數(shù)據(jù)可視化技術(shù)》 課件 22 大數(shù)據(jù)崗位分析

《數(shù)據(jù)可視化技術(shù)》單元22大數(shù)據(jù)崗位分析01準(zhǔn)備活動(dòng)點(diǎn)名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容本單元學(xué)習(xí)使用Vue+Echarts大屏展示。任務(wù)1、生命周期函數(shù)的使用任務(wù)2、注冊(cè)、引用組件任務(wù)3、Vue+Echarts實(shí)現(xiàn)崗位分析大屏學(xué)習(xí)目標(biāo)1、知識(shí)（1）掌握生命周期函數(shù)的使用方法，能夠靈活運(yùn)用生命周期函數(shù)在特定時(shí)間執(zhí)行特定的操作（2）掌握注冊(cè)組件的方法，能夠運(yùn)用全局注冊(cè)或者局部注冊(cè)的方式完成組件的注冊(cè)（3）掌握引用組件的方法，能夠在Vue項(xiàng)目中以標(biāo)簽的形式引用組件（4）掌握Vue引入Echarts的方法2、技能（1）能夠注冊(cè)組件（2）能夠引用組件（3）能夠使用Vue+Echarts完成大屏展示3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國(guó)精神；（3）信息檢索能力02發(fā)展活動(dòng)任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實(shí)施生命周期函數(shù)11生命周期函數(shù)在Vue中，組件的生命周期是指每個(gè)組件從被創(chuàng)建到被銷毀的整個(gè)過(guò)程，每個(gè)組件都有生命周期。如果想要在某個(gè)特定的時(shí)機(jī)進(jìn)行特定的處理，可以通過(guò)生命周期函數(shù)來(lái)完成。隨著組件生命周期的變化，生命周期函數(shù)會(huì)自動(dòng)執(zhí)行。1生命周期函數(shù)函數(shù)說(shuō)明onBeforeMount()組件掛載前onMounted()組件掛載成功后onBeforeUpdate()組件更新前onUpdated()組件中的任意的DOM元素更新后onBeforeUnmount()組件實(shí)例被銷毀前onUnmounted()組件實(shí)例被銷毀后組合式API下的生命周期函數(shù)如下表所示。

1生命周期函數(shù)<scriptsetup>import{onMounted}from'vue'onMounted(()=>{//執(zhí)行操作})</script>以onMounted()函數(shù)為例演示生命周期函數(shù)的使用。

1生命周期函數(shù)步驟1演示生命周期函數(shù)的使用方法步驟2創(chuàng)建src\components\LifecycleHooks.vue文件，用于通過(guò)生命周期函數(shù)查看在特定時(shí)間點(diǎn)下的DOM元素。<template><divclass="container">container</div></template><scriptsetup>import{onBeforeMount,onMounted}from'vue'onBeforeMount(()=>{console.log('DOM元素渲染前',document.querySelector('.container'))})onMounted(()=>{console.log('DOM元素渲染后',document.querySelector('.container'))})</script>1生命周期函數(shù)步驟1步驟2修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/LifecycleHooks.vue'演示生命周期函數(shù)的使用方法1生命周期函數(shù)保存上述代碼后，在瀏覽器中訪問:5173/并打開控制臺(tái)，使用生命周期函數(shù)的頁(yè)面效果和控制臺(tái)如下圖所示。1生命周期函數(shù)<script>exportdefault{data(){return{value:'HelloVue.js'}},beforeCreate(){console.log('實(shí)例對(duì)象創(chuàng)建前:'+this.value)},created(){console.log('實(shí)例對(duì)象創(chuàng)建后:'+this.value)}}</script>演示選項(xiàng)式API下beforeCreate()函數(shù)和created()函數(shù)的使用。

組件的注冊(cè)和引用22.1注冊(cè)組件當(dāng)在Vue項(xiàng)目中定義了一個(gè)新的組件后，要想在其他組件中引用這個(gè)新的組件，需要對(duì)新的組件進(jìn)行注冊(cè)。在注冊(cè)組件的時(shí)候，需要給組件取一個(gè)名字，從而區(qū)分每個(gè)組件，可以采用帕斯卡命名法（PascalCase）為組件命名。Vue提供了兩種注冊(cè)組件的方式，分別是全局注冊(cè)和局部注冊(cè)。2.1注冊(cè)組件component('組件名稱',需要被注冊(cè)的組件)1.全局注冊(cè)在實(shí)際開發(fā)中，如果某個(gè)組件的使用頻率很高，許多組件中都會(huì)引用該組件，則推薦將該組件全局注冊(cè)。被全局注冊(cè)的組件可以在當(dāng)前Vue項(xiàng)目的任何一個(gè)組件內(nèi)引用。在Vue項(xiàng)目的src\main.js文件中，通過(guò)Vue應(yīng)用實(shí)例的component()方法可以全局注冊(cè)組件，該方法的語(yǔ)法格式如下。上述語(yǔ)法格式中，component()方法接收兩個(gè)參數(shù)，第1個(gè)參數(shù)為組件名稱，注冊(cè)完成后即可全局使用該組件名稱，第2個(gè)參數(shù)為需要被注冊(cè)的組件。2.1注冊(cè)組件import{createApp}from'vue';import'./style.css'importAppfrom'./App.vue'importMyComponentfrom'./components/MyComponent.vue'constapp=createApp(App)ponent('MyComponent',MyComponent)app.mount('#app')在src\main.js文件中注冊(cè)一個(gè)全局組件MyComponent，示例代碼如下。2.1注冊(cè)組件ponent('ComponentA',ComponentA).component('ComponentB',ComponentB).component('ComponentC',ComponentC)component()方法支持鏈?zhǔn)秸{(diào)用，可以連續(xù)注冊(cè)多個(gè)組件，示例代碼如下。2.1注冊(cè)組件在實(shí)際開發(fā)中，如果某些組件只在特定的情況下被用到，推薦進(jìn)行局部注冊(cè)。局部注冊(cè)即在某個(gè)組件中注冊(cè)，被局部注冊(cè)的組件只能在當(dāng)前注冊(cè)范圍內(nèi)使用。局部注冊(cè)組件的示例代碼如下。2.局部注冊(cè)<script>importComponentAfrom'./ComponentA.vue'exportdefault{components:{ComponentA:ComponentA}}</script>2.1注冊(cè)組件在使用setup語(yǔ)法糖時(shí)，導(dǎo)入的組件會(huì)被自動(dòng)注冊(cè)，無(wú)須手動(dòng)注冊(cè)，導(dǎo)入后可以直接在模板中使用，示例代碼如下。<scriptsetup>importComponentAfrom'./ComponentA.vue'</script>2.2 引用組件將組件注冊(cè)完成后，若要將組件在頁(yè)面中渲染出來(lái)，需要引用組件。在組件的<template>標(biāo)簽中可以引用其他組件，被引用的組件需要寫成標(biāo)簽的形式，標(biāo)簽名應(yīng)與組件名對(duì)應(yīng)。組件的標(biāo)簽名可以使用短橫線分隔或帕斯卡命名法命名。例如，<my-component>標(biāo)簽和<MyComponent>標(biāo)簽都表示引用MyComponent組件。一個(gè)組件可以被引用多次，但不可出現(xiàn)自我引用和互相引用的情況，否則會(huì)出現(xiàn)死循環(huán)。2.2 引用組件步驟1創(chuàng)建src\components\ComponentUse.vue文件。步驟3步驟4步驟2步驟5演示組件的使用方法<template><h5>父組件</h5><divclass="box"></div></template><style>.box{display:flex;}</style>2.2 引用組件步驟1步驟3步驟4步驟2步驟5演示組件的使用方法修改src\main.js文件，切換頁(yè)面中顯示的組件。importAppfrom'./components/ComponentUse.vue'2.2 引用組件步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\GlobalComponent.vue文件，表示全局組件。演示組件的使用方法<template><divclass="global-container"><h5>全局組件</h5></div></template><style>.global-container{border:1pxsolidblack;height:50px;flex:1;}</style>2.2 引用組件步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\LocalComponent.vue文件，表示局部組件。<template><divclass="local-container"><h5>局部組件</h5></div></template><style>.local-container{border:1pxdashedblack;height:50px;flex:1;}</style>演示組件的使用方法2.2 引用組件步驟3步驟4步驟2步驟5步驟1修改src\main.js文件，導(dǎo)入GlobalComponent組件并調(diào)用component()方法全局注冊(cè)GlobalComponent組件。import{createApp}from'vue'import'./style.css'importAppfrom'./components/ComponentUse.vue'importGlobalComponentfrom'./components/GlobalComponent.vue'constapp=createApp(App)ponent('GlobalComponent',GlobalComponent)app.mount('#app')演示組件的使用方法2.2 引用組件步驟6步驟7修改src\components\ComponentUse.vue文件，添加代碼導(dǎo)入LocalComponent組件。<scriptsetup>importLocalComponentfrom'./LocalComponent.vue'</script>演示組件的使用方法2.2 引用組件步驟6步驟7修改src\components\ComponentUse.vue文件，在class為box的<div>標(biāo)簽中引用GlobalComponent組件和LocalComponent組件。<divclass="box"><GlobalComponent/><LocalComponent/></div>演示組件的使用方法2.2 引用組件保存上述代碼后，在瀏覽器中訪問:5173/，引用組件后的頁(yè)面效果如下圖所示。Vue實(shí)現(xiàn)大數(shù)據(jù)崗位分析大屏可視化3任務(wù)資訊步驟一：安裝Echartsyarnaddecharts步驟二：在Vue組件中引入Echartsimport*asechartsfrom

'echarts’;步驟三：創(chuàng)建圖表實(shí)例并設(shè)置配置//在Vue組件的mounted鉤子函數(shù)中

mounted(){//基于準(zhǔn)備好的dom，初始化echarts實(shí)例

letmyChart=echarts.init(document.getElementById('chart'));//配置項(xiàng)和數(shù)據(jù)

letoption={ …

};//使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表

myChart.setOption(option); }任務(wù)實(shí)