《数据可视化技术》 课件 22 大数据岗位分析

《数据可视化技术》单元22大数据岗位分析01准备活动点名、复习本次课学习内容、学习目标介绍学习内容本单元学习使用Vue+Echarts大屏展示。任务1、生命周期函数的使用任务2、注册、引用组件任务3、Vue+Echarts实现岗位分析大屏学习目标1、知识（1）掌握生命周期函数的使用方法，能够灵活运用生命周期函数在特定时间执行特定的操作（2）掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成组件的注册（3）掌握引用组件的方法，能够在Vue项目中以标签的形式引用组件（4）掌握Vue引入Echarts的方法2、技能（1）能够注册组件（2）能够引用组件（3）能够使用Vue+Echarts完成大屏展示3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施生命周期函数11生命周期函数在Vue中，组件的生命周期是指每个组件从被创建到被销毁的整个过程，每个组件都有生命周期。如果想要在某个特定的时机进行特定的处理，可以通过生命周期函数来完成。随着组件生命周期的变化，生命周期函数会自动执行。1生命周期函数函数说明onBeforeMount()组件挂载前onMounted()组件挂载成功后onBeforeUpdate()组件更新前onUpdated()组件中的任意的DOM元素更新后onBeforeUnmount()组件实例被销毁前onUnmounted()组件实例被销毁后组合式API下的生命周期函数如下表所示。

1生命周期函数<scriptsetup>import{onMounted}from'vue'onMounted(()=>{//执行操作})</script>以onMounted()函数为例演示生命周期函数的使用。

1生命周期函数步骤1演示生命周期函数的使用方法步骤2创建src\components\LifecycleHooks.vue文件，用于通过生命周期函数查看在特定时间点下的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生命周期函数步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/LifecycleHooks.vue'演示生命周期函数的使用方法1生命周期函数保存上述代码后，在浏览器中访问:5173/并打开控制台，使用生命周期函数的页面效果和控制台如下图所示。1生命周期函数<script>exportdefault{data(){return{value:'HelloVue.js'}},beforeCreate(){console.log('实例对象创建前:'+this.value)},created(){console.log('实例对象创建后:'+this.value)}}</script>演示选项式API下beforeCreate()函数和created()函数的使用。

组件的注册和引用22.1注册组件当在Vue项目中定义了一个新的组件后，要想在其他组件中引用这个新的组件，需要对新的组件进行注册。在注册组件的时候，需要给组件取一个名字，从而区分每个组件，可以采用帕斯卡命名法（PascalCase）为组件命名。Vue提供了两种注册组件的方式，分别是全局注册和局部注册。2.1注册组件component('组件名称',需要被注册的组件)1.全局注册在实际开发中，如果某个组件的使用频率很高，许多组件中都会引用该组件，则推荐将该组件全局注册。被全局注册的组件可以在当前Vue项目的任何一个组件内引用。在Vue项目的src\main.js文件中，通过Vue应用实例的component()方法可以全局注册组件，该方法的语法格式如下。上述语法格式中，component()方法接收两个参数，第1个参数为组件名称，注册完成后即可全局使用该组件名称，第2个参数为需要被注册的组件。2.1注册组件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文件中注册一个全局组件MyComponent，示例代码如下。2.1注册组件ponent('ComponentA',ComponentA).component('ComponentB',ComponentB).component('ComponentC',ComponentC)component()方法支持链式调用，可以连续注册多个组件，示例代码如下。2.1注册组件在实际开发中，如果某些组件只在特定的情况下被用到，推荐进行局部注册。局部注册即在某个组件中注册，被局部注册的组件只能在当前注册范围内使用。局部注册组件的示例代码如下。2.局部注册<script>importComponentAfrom'./ComponentA.vue'exportdefault{components:{ComponentA:ComponentA}}</script>2.1注册组件在使用setup语法糖时，导入的组件会被自动注册，无须手动注册，导入后可以直接在模板中使用，示例代码如下。<scriptsetup>importComponentAfrom'./ComponentA.vue'</script>2.2 引用组件将组件注册完成后，若要将组件在页面中渲染出来，需要引用组件。在组件的<template>标签中可以引用其他组件，被引用的组件需要写成标签的形式，标签名应与组件名对应。组件的标签名可以使用短横线分隔或帕斯卡命名法命名。例如，<my-component>标签和<MyComponent>标签都表示引用MyComponent组件。一个组件可以被引用多次，但不可出现自我引用和互相引用的情况，否则会出现死循环。2.2 引用组件步骤1创建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文件，切换页面中显示的组件。importAppfrom'./components/ComponentUse.vue'2.2 引用组件步骤3步骤4步骤2步骤5步骤1创建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创建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文件，导入GlobalComponent组件并调用component()方法全局注册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文件，添加代码导入LocalComponent组件。<scriptsetup>importLocalComponentfrom'./LocalComponent.vue'</script>演示组件的使用方法2.2 引用组件步骤6步骤7修改src\components\ComponentUse.vue文件，在class为box的<div>标签中引用GlobalComponent组件和LocalComponent组件。<divclass="box"><GlobalComponent/><LocalComponent/></div>演示组件的使用方法2.2 引用组件保存上述代码后，在浏览器中访问:5173/，引用组件后的页面效果如下图所示。Vue实现大数据岗位分析大屏可视化3任务资讯步骤一：安装Echartsyarnaddecharts步骤二：在Vue组件中引入Echartsimport*asechartsfrom

'echarts’;步骤三：创建图表实例并设置配置//在Vue组件的mounted钩子函数中

mounted(){//基于准备好的dom，初始化echarts实例

letmyChart=echarts.init(document.getElementById('chart'));//配置项和数据

letoption={ …

};//使用刚指定的配置项和数据显示图表

myChart.setOption(option); }任务实