大数据分析技术应用- 课件 第五章vue

7Helloworld第1个vue项目学习目标掌握vue项目目录结构掌握vue新建项目步骤132知识思政技能能创建vue项目能初始化vue项目培养细心的工作态度培养客观严谨精神一、vue新建项目在vue中新建项目的步骤为：1、在电脑硬盘新建一个文件夹，用来存放蜂行天下驾驶舱大屏项目。比如在D：\fxtx_project2、win+r打开终端，用cd命令，将路径切换到新建项目路径,cdd:\fxtx_project一、vue新建项目在vue中新建项目的步骤为：3、输入“vuecreate项目名称”语句新建项目。注意：项目名不能有大写字母，中文和特殊符号。一、vue新建项目default（babel是一个广泛使用的转码器，将es6转es5,eslint代码格式化工具)在vue中新建项目的步骤为：4、选择项目设置默认vue2或vue3自定义配置manuallly:手动设置,自行指定哪些插件安装,哪些不安装。相比于默认选择，更倾向于选择手动添加，选中Manuallyselectfeatures，敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：5、为项目配置特征根据项目所需，按上下键切换选项，按空格键选择或者取消选择，配置项目。一、vue新建项目在vue中新建项目的步骤为：5、各特征的含义为：本项目选择1、4、5、6、7项，敲回车进入下一步。后面所有选项采用默认值即可。(*)Babel//使用babel()TypeScript//TypeScript可以根据项目需要去配置

()ProgressiveWebApp(PWA)Support//一般项目都不使用PWA(*)Router//建议添加vue-router，官方的路由管理包，添加之后会自动生成路由配置相关代码

(*)Vuex//建议添加vuex，官方的全局状态管理包，添加之后会自动生成全局状态配置相关代码

(*)CSSPre-processors//使用css预处理器，建议勾选，一般会使用scss或者less(*)Linter/Formatter//代码格式化相关配置

()UnitTesting//不配置测试

()E2ETesting//不配置测试一、vue新建项目在vue中新建项目的步骤为：6、为项目选择vue的版本，默认为vue3，本项目使用默认值。敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：7、是否使用history路由模式，默认值为yes。选择history模式需要后台服务进行相关设置,这里输入n,回车

一、vue新建项目在vue中新建项目的步骤为：8、选择一个css预处理器，这里选择less，敲回车。一、vue新建项目在vue中新建项目的步骤为：9、自动代码格式检测,选择eslint+prettier，回车一、vue新建项目在vue中新建项目的步骤为：10、语法检测方式,，Lintonsave：保存就检查代码语法，Lintandfixoncommit：只有在commit的时候检查并修复。选择第1项，回车。一、vue新建项目在vue中新建项目的步骤为：10、选择配置信息存放位置，单独存放或者并入package.json一般默认选择第一个，插件配置单独存放在一个文件使用默认值直接敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：11、是否保存为预设，这样下次创建项目就不用重新选择，默认值为no。使用默认值直接敲回车进入下一步。一、vue新建项目在vue中新建项目的步骤为：12、以上配置选择完毕后，就开始创建项目了，安装完项目所需的包后，终端提示项目创建成功。二、vue项目目录结构创建好vue项目以后，用vscode打开该项目，项目构成如下：node_modules：放置这个应用程序依赖的所有npm依赖项。public：放置需要提供给客户端的任何文件（如index.html文件）。src：放置这个应用程序的源文件，基本上要做的事情都在这个目录里components：放置应用程序中所有的Vue组件。5.routes：放置路由配置文件，其中定义了url和该url映射到的组件。6.store：放置Vuex状态管理模块，可以用来提供全局统一存储。

7.views：放置应用程序的特定页面（如表格，图形，表单等）。除上述目录外，Vue项目还可能有以下其他文件：1.app.vue是项目的根组件2.src/main.js是入口文件，在main.js文件中定义了一个vue对象3.package.json：一个软件包管理文件，包含了有用的信息，如应用程序的依赖项，构建工具，脚本等。4.README.md：一个提供该项目的基本概述的文件，可以包含关于项目的安装，配置和运行说明。5.eslintrc.js：用于配置Babel或ESLint的文件。三、vue项目初始化本小节最终要完成一个vue+echars项目，效果图如下：三、vue项目初始化vue项目的运行方法为：打开vscode终端,输入npmrunserve,然后打开下面链接中的任意一个，比如：http://localhost:8080/。运行刚刚创建成功的项目，得到项目的初始界面如下：三、vue项目初始化vue项目初始界面：三、vue项目初始化vue项目初始界面与我们的项目效果相比，有许多不需要的内容，所以先清空这些没用的内容。三、vue项目初始化2、进行项目初始化配置具体操作如下：①删除src

views

AboutView.vue和HomeView.vue这两个文件。三、vue项目初始化2、进行项目初始化配置具体操作如下：②接着在src

views下创建我们自己项目的首页面，比如命名为：homepage.vue三、vue项目初始化2、进行项目初始化配置具体操作如下：③在homepage.vue中输入vue文件最基本的结构：<template>,<script><style>三、vue项目初始化2、进行项目初始化配置具体操作如下：④因为已经删除了views下的home和about文件，所以，需要删除router下index.js中有关这两个文件的路由编码，并为我们自己的页面homePage设置路由。三、vue项目初始化2、进行项目初始化配置具体操作如下：④因为已经删除了views下的home和about文件，所以，需要删除router下index.js中有关这两个文件的路由编码，并为我们自己的页面homePage设置路由重定向。三、vue项目初始化2、进行项目初始化配置具体操作如下：保存运行项目。在页面中显示helloworld!下面可以进一步删除多余的默认样式。三、vue项目初始化2、进行项目初始化配置具体操作如下：⑤在全局根组件app.vue中，删除完多余代码后呈现最最基本的样式。如下所示。三、vue项目初始化2、进行项目初始化配置具体操作如下：再次运行项目，得到最初始的页面。三、vue项目初始化项目初始化小结Vue项目初始化包括如下几步：1、删除views下的两个vue文件2、在views中新建我们项目的页面文件HomePage.vue文件3、修改router下的index.js配置路由文件4、修改根组件默认显示内容与初始化项目样式本次课内容小结创建vue项目的命令是：vuecreate项目名称运行vue项目的命令是：npmrunserve初始化vue项目：删除多余组件和样式，修改路由，修改根组件谢谢6vue项目环境搭建学习目标掌握vue的基本概念掌握vue项目搭建的过程132知识思政技能能搭建出VUE环境能在vue中安装node培养科学探究精神培养客观严谨精神学习目标1、vue的基本概念2、vue项目环境搭建一、vue的基本概念/是目前前端最火的框架之一单个html网页可以基于vue开发单独功能模块可以基于vue开发整个项目都可以基于vue开发渐进：

vue读作view，用于构建用户界面。一、vue的基本概念vue的特点：一、vue的基本概念组件化：vue支持组件化开发，允许将一个页面划分成多个独立的组件，提高了代码的复用性和维护性。响应式：vue提供了响应式数据绑定，当数据发生变化时，界面会自动更新。一、vue的基本概念vue是前端开发人员的首选入门框架，有很多优势：vue可以进行组件化开发，使代码编写量大大减少，易于理解。vue可以对数据进行双向绑定。vue编写出来的网页在各种设备上都能显示出非常好看的效果。vue使用路由实现页面的切换和跳转,不会刷新页面。二、vue项目环境配置前提：1、熟悉cmd命令行，win+r打开cmd命令行,

cddir等命令2、已经安装15.0或更高版本的node.js二、vue项目环境配置配置vue需要安装node的原因:node.js使JavaScript能够在服务器端运行,处理请求、访问数据库等。node.js通常用作后端服务器，而vue.js则用于构建用户界面，前后端职责分明，便于项目的管理和维护。vue.js只聚焦于视图层,容易与其它库或已有项目整合。而node可以提供包管理工具,整个项目就能实现模块化组件化。node.js和vue.js存在紧密的联系，在开发大型跨端应用程序时，可以相互配合，共同提升开发效率和质量。二、vue项目环境配置1、node.js的安装和配置1）进入node.js官网/en，点击菜单栏第3项“DOWNLOADS”，如图所示。二、vue项目环境配置1、node.js的安装和配置2)选择长期支持LTS(LongTermSupport的缩写)版本，根据操作系统类型选择对应安装文件，这里选择64位Windows安装包。开始下载，下载好的安装包名称为“node-版本号.msi”,把安装包保存在电脑中。二、vue项目环境配置1、node.js的安装和配置3)为避免占用C盘空间，在C盘之外的盘符新建文件夹。比如在D盘下，新建名为node的文件夹，用于存储安装文件。双击下载好的安装包，开始安装。（注意：在安装过程中，把默认的安装路径修改为本步新建的文件夹路径，即D:\node），其他步骤按安装向导进行。二、vue项目环境配置4)当系统新安装一个程序时，会到path中指定的路径去寻找该程序。所以，安装完程序还需要设置环境变量path，让操作系统能运行程序。安装结束后，将node安装文件路径添加到系统环境变量中。1、node.js的安装和配置二、vue项目环境配置4)操作步骤为：右键单击【此电脑】-【属性】-【高级系统设置】-【环境变量】，在【系统变量】中点击【Path】,单击【编辑】按钮，D:\node添加到系统环境变量列表中。1、node.js的安装和配置二、vue项目环境配置1、node.js的安装和配置5)打开node文件夹，在其中新建两个子文件夹，分别命名为：node_cache和node_global,,用于第7步配置缓存路径和全局安装路径。二、vue项目环境配置1、node.js的安装和配置6)Win+R打开终端操作界面，输入node-v（注意：node后面有空格），回车，

查看node版本。如果显示node版本

，则表明node.js安装成功。二、vue项目环境配置1、node.js的安装和配置7)紧接着，在提示符后输入：npmconfigsetprefix“D:\node\node_global”,设置npm全局安装路径。在下一条提示符后输入：npmconfigsetcache“D:\node\node_cache”，配置缓存路径。二、vue项目环境配置1、node.js的安装和配置8)打开环境变量对话框

，在【系统变量】中点击【新建】，输入变量名为：NODE_PATH(注意：系统环境变量名称一般采用大写字母命名)，变量值为：node_modules路径（直接复制node_modules路径到变量值对话框中）二、vue项目环境配置1、node.js的安装和配置9)打开环境变量对话框

，在【系统变量】中点击【新建】，输入变量名为：NODE_PATH(注意：系统环境变量名称一般采用大写字母命名)，变量值为：node_modules路径（直接复制node_modules路径到变量值对话框中）单击【确定】按钮，则系统变量列表中新增了一项NODE_PATH。二、vue项目环境配置1、node.js的安装和配置10)编辑【用户变量】中的【Path】，点击【新建】，在用户环境变量列表中新增node_global和node_cache的路径，最后，单击【确定】按钮，完成用户环境变量的设置。

二、vue项目环境配置以上10个步骤完成了node.js的安装和配置。npm是nodejs平台默认的包管理工具，新版本的nodejs已经集成了npm，所以npm会随同nodejs一起安装，安装完成后可以利用“npm-v”命令查看是否安装成功。下面使用npm工具安装vue.js。二、vue项目环境配置1)以管理员模式打开终端，输入npminstallvue-g（windows下npm安装vue,-g是指安装到global全局目录）

，全局安装

vue.js。2、vue.js的安装二、vue项目环境配置方法：以管理员模式打开终端，输入vue–v,如果显示vue的各种命令，则表示安装成功。3、

查看vue.js是否安装成功二、vue项目环境配置4、vue脚手架的安装

在管理员模式下，在终端输入npminstall@vue/cli-g,全局安装脚手架。本项目是一个蜂产业数据的可视化驾驶舱，在单页面呈现echarts的地图、折线图、饼图等。cli是Command-LineInterface的缩写，翻译为命令行界面，俗称脚手架。vue-cli是一个官方发布的vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。vue-cli安装方法如下：二、vue项目环境配置在管理员模式下，在终端输入vue

--version或者vue-V，如果呈现vue脚手架的版本号，则表示安装成功。安装完vue脚手架后，判断是否安装成功的方法如下：5、

查看vue脚手架的安装vue项目配置小结谢谢9vue中echarts图表的实现学习目标掌握语法糖的概念掌握vue插槽实现代码复用的原理132知识思政技能能向插槽中插入echarts图表能在vue3中使用echarts图表培养创新精神培养严谨的工作态度一、向插槽中插入简单测试内容

itemPage为插槽页面，其中已经留好了槽口slot。如何向槽口中插入图表呢？我们先从插入简单文字内容学起。简单内容如果能够显示成功，后面只需要把简单内容换成图表，就实现了图表的显示。实现步骤：1、在components中新建itemOne.vue

~

itemSix.vue6个子组件，用来表示6个图表。2、在itemOne.vue中输入简单测试内容“图表1”。在另外5个图表组件中，复制itemOne.vue的代码，分别显示文字：图表2、图表3…图表6

<template>

<div>

图表1

</div></template>一、向插槽中插入简单测试内容

实现步骤：3、把itemOne.vue

~

itemSix.vue6，插入到homePage.vue中。和前面对itemPage子组件的调用方法一样，在homePage.vue中先引用，后调用。具体实现代码为：<script>import

itemPage

from

"@/components/itemPage.vue"import

itemOne

from

"@/components/itemOne.vue"import

itemTwo

from

"@/components/itemTwo.vue"import

itemThree

from

"@/components/itemThree.vue"import

itemFour

from

"@/components/itemFour.vue"import

itemFive

from

"@/components/itemFive.vue"import

itemSix

from

"@/components/itemSix.vue"export

default{components:{itemPage,itemOne,itemTwo,itemThree,itemFour,itemFive,itemSix}}</script>先引用再调用一、向插槽中插入简单测试内容

实现步骤：4、把6个图表组件插入到插槽页面itemPage中,因为itemPage中留有slot标签，当有新的dom元素进入到itemPage中，会自动进入到插槽中。从而实现了代码复用。

<section

class="container">

<!--左-->

<section

class="itemLeft">

<itemPage><itemOne/></itemPage>

<itemPage><itemTwo/></itemPage>

<itemPage><itemThree/></itemPage>

</section>

<!--中-->

<section

class="itemCenter"><h2>地图</h2></section>

<!--右-->

<section

class="itemRight">

<itemPage><itemFour/></itemPage>

<itemPage><itemFive/></itemPage>

<itemPage><itemSix/></itemPage>

</section>

</section>

左侧3个图表右侧3个图表一、向插槽中插入简单测试内容

经过以上4个步骤，6个图表组件就插入到了插槽中。保存运行程序，查看效果，完成目标。二、vue3中使用echarts图表

6个测试内容都已经成功显示。下面只需要编写itemOne.vue

~

itemSix.vue6的内容，在vue3中使用echarts图表，对每个图表详细设置，替换掉测试文字就可以了。vue3中使用echarts图表步骤如下：首先安装echarts。在项目终端输入：npminstallecharts--save安装echarts组件二、vue3中使用echarts图表

然后，利用Vue3.2版本之后提供的<scriptsetup>语法，编写图表<scriptsetup>是一种编译时语法糖，用于在单文件组件（SFC）中使用组合API。与正常语法相比，它有如下优点：更简洁的代码，更少的样板能够使用纯TypeScript声明props和发出的事件更好的运行时性能（模板编译为同一作用域中的渲染函数，无需中间代理）更好的IDE类型推断性能（语言服务器从代码中提取类型的工作量更少）二、vue3中使用echarts图表

vue3使用echarts5图表9个步骤<template>

<div

class=“chart”

ref=“ret”></div>

//1、在图表容器中添加ref属性来获取DOM元素ret

</template><scriptsetup>

//2、使用vue3语法糖import{ref,onMounted}from“vue”;//3、导入vue3的ref函数和onMounted函数。ref函数用于创建响应式的数据。它接受一个参数作为初始值，并返回一个包含value属性的对象；onMounted函数是生命周期钩子函数，用于在组件挂载到DOM后执行代码。它接受一个函数作为参数，并在组件挂载后立即执行该函数。import*asechartsfrom“echarts”;//4、引入echarts组件，别名为echartsvarret=ref();//5、使用vue3.2的ref函数，创建一个响应式引用ret。onMounted(()=>{//6、调用生命周期钩子函数,它会在组件挂载后执行。varmyChart=echarts.init(ret.value);//7、基于准备好的dom，初始化echarts实例叫myChartvaroption={…..图表的具体配置项};//8、指定图表的配置项和数据。不同图表只是option不同，其余步骤是相同的myChart.setOption(option);//9、将配置选项应用到图表中,从而展现出想要的图表样式和数据展示效果});</script><style></style>;三、向插槽中插入echarts图表

基于以上vue3使用echarts图表的代码逻辑，分别编写itemOne.vue到itemSix.vue等6个图表子组件。把修改后的6个子组件放入itemPage中，则图表内容自动插入到itemPage的slot插槽中。<!--大容器-->

<section

class="container">

<!--左-->

<section

class="itemLeft">

<itemPage><itemOne/></itemPage>

<itemPage><itemTwo/></itemPage>

<itemPage><itemThree/></itemPage>

</section>

<!--中-->

<section

class="itemCenter"><h2>地图</h2></section>

<!--右-->

<section

class="itemRight">

<itemPage><itemFour/></itemPage>

<itemPage><itemFive/></itemPage>

<itemPage><itemSix/></itemPage>

</section>

</section>

三、向插槽中插入echarts图表

保存运行项目，发现图表已经成功显示在对应容器中。目标达成。谢谢10大屏地图的实现学习目标熟悉China.js文件（重点）掌握地图实现的步骤（难点）132知识思政技能能在vue中实现echarts地图能对echarts地图进行美化（重点）培养精益求精的工作态度培养团队合作精神一、china.js简介

在vue中实现中国地图是基于echarts.js和china.js来完成的。china.js

是一个开源的JavaScript库,它提供了许多与地理位置、时区、语言等相关的方法和属性,可以帮助开发者更加方便地处理与地理位置相关的数据。在echarts最新的5.4.0版本中，已不能直接引用china.js来绘制中国地图，需要自己下载china.js包china.js下载链接如下：/download/m0_54583478/35175000?utm_source=bbsseo在需要呈现中国地图的组件里直接引用china.js，最后结合ECharts图表,实现散点图二、大屏地图的实现

1、首先把下载的china.js文件复制到项目的根目录下。2、在项目component文件夹下新建地图子组件,命名为chinaMap.vue在<script>标签中输入import语句，引用地图数据文件“china.js”。3、和前面对柱状图等echarts图表的使用方法一样，

在chinaMap.vue在<script>标签引用vue框架中的ref和onMounted方法、echarts库二、大屏地图的实现

4、由于本项目的地图要呈现出不同地区的花期和蜜源植物，所以，定义变量geoCoordMap保存每个地名对应的经纬度以及花期信息，以方便后期在地图上呈现。var

geoCoordMap

={

广州:[113.5107,23.2196,["1月到3月"

+

":"

+

"采油菜","紫云英"]],

北京:[116.4551,40.2539,["4月到5月"

+

":"

+

"采枣树"

+

"</br>"

+

"6月"

+

":"

+

"紫云英"]],

南昌:[116.0046,28.6633,["3月到4月"

+

":"

+

"采油菜","紫云英"]],

长春:[125.8154,44.2584,[

"7月"

+

":"

+

"采草木犀",

"荆条",

"椴树"

+

"</br>"

+

"8月"

+

":"

+

"向日葵,苕条"]],

呼和浩特:[111.4124,40.4901,["8月-9月"

+

":"

+

"月采"]],

};二、大屏地图的实现

5、定义地图上放峰线路的起点和终点数据：使用数组变量

gzData、ncData、bjData、ccData

分别保存了广州到广州、广州到南昌、南昌到北京、北京到长春、长春到呼和浩特的起点和终点地名。var

gzData

=[

[

{

name:"广州",

},

{

name:"广州",

},

],

[

{

name:"广州",

},

{

name:"南昌",

},

],

];var

ncData

=[

[

{

name:

"南昌",

},

{

name:

"北京",

},

],

];var

bjData

=[

[

{

name:

"北京",

},

{

name:

"长春",

},

],

];var

ccData

=[

[

{

name:

"长春",

},

{

name:

"呼和浩特",

},

],

];二、大屏地图的实现

6、定义

vue的

ref

对象：使用

ret

变量创建了一个ref对象，用于在

vue模板中引用

<divref="ret"id="dom"></div>

元素。varret=ref()二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。①使用

echarts.init()

方法初始化一个echarts实例，并传入之前定义的

ret.value

对象作为容器。var

mecharts=echarts.init(ret.value)二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。②定义数据处理函数

convertData：这个函数用于将起点和终点的地名转换成地理坐标，并将转换后的数据以适合echarts的格式返回。var

convertData=function(data){

var

res=[]

for(let

i=

0;i

<

data.length;i++){

var

dataItem=data[i]

var

fromCoord=geoCoordMap[dataItem[0].name]

var

toCoord=geoCoordMap[dataItem[1].name]

if(fromCoord!=toCoord){

res.push([

{

coord:fromCoord

},

{

coord:toCoord

}])}

}

return

res;

}

geoCoordMapcode函数是一个用于地理坐标映射的函数，它将地球上的经纬度坐标转换为地图上的点，从而在地图上准确地显示出这些坐标的位置二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。定义配置项

series：这里使用循环遍历前面定义的起点和终点数据，依次生成一个包含起点、终点坐标和连线的系列数据对象，并将其添加到

series

数组中。var

series=[];

[

["广州",gzData],

["南昌",ncData],

["北京",bjData],

["长春",ccData]

].forEach(function(item){

console.log("item",item);

console.log("convertData(item[1]",convertData(item[1]));

series.push({

//带有起点和终点的线数据的绘制

主要用于地图上的航线

数据的可视化

type:"lines",

//数据

data:convertData(item[1])

})

})二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。④定义最终的echarts配置项

option：设定地图类型为“china”，并设置缩放比例为1.2。然后将之前生成的

series

数组作为系列数据添加到

option

中。var

option={

geo:{

map:'china',

//当前视角的缩放比例

zoom:1.2

},

series:series

}二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。⑤使用

setOption

方法将配置项应用到echarts实例上。mCharts.setOption(option)二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。⑥样式设置：通过定义的样式规则，对渲染图表的容器

<divid="dom"></div>

进行样式设置，设置其宽度为600px，高度为400px，边距为60px。#dom{

width:600px;

height:400px;

margin:60px;

}二、大屏地图的实现

经过以上7个步骤，在中间区域呈现中国地图。下面将对地图进行美化。三、地图的美化

1、线形的尾迹特效实现对地图上城市之间的连接线进行特效设置。在series.push片段中的type:“lines”后，输入如下线形的尾迹特效代码。//线特效的配置

effect:{

//特效尾迹的长度取从0到1的值数值越大尾迹越长

trailLength:

0,

//特效图形的标记。'circle','rect','roundRect','triangle','diamond','pin','arrow','none'

Symbol:"arrow",

//

特效图形的标记

show:true,

//特效的时间

period:6,

//特效颜色

color:"#fff",

//特效标记的大小

symbolSize:3

},三、地图的美化

2、设置连接线的颜色以及宽度接1，在其后面一行，继续输入如下代码，设置线的宽度、透明度和颜色//线的数组

lineStyle:{

color:"#3ed4ff",

//线条宽度

width:2,

//线条透明度

opacity:2,

},三、地图的美化

2、设置连接线的颜色以及宽度这段代码执行之后，线的颜色变为设置的蓝色。三、地图的美化

3、设置带有涟漪特效的气泡图在数据data后，编写代码，对数值设置带有涟漪特效的气泡图，这种动画特效可以将数据视觉显示。三、地图的美化

3、设置带有涟漪特效的气泡图涟漪特效的气泡图具体代码如下：{

//数值带有涟漪特效的气泡图，利用动画特效可以将一些需要突出的数据进行视觉突出

type:"effectScatter",

//利用地址坐标系

coordinateSystem:"geo",

//图形的显示文本

label:{

//是否显示标签

show:true,

position:"bottom",

formatter:"{b}"

},

//图形颜色

itemStyle:{

//图形的颜色

color:

"#3ed4ff",

},

data:item[1].map(function(dataItem){

return{

name:dataItem[1].name,

value:geoCoordMap[dataItem[1].name]

}三、地图的美化

4、设置地图区域颜色

var

option={

geo:{

map:'china',

//当前视角的缩放比例

zoom:1.2,

itemStyle:{

//地图区域颜色

areaColor:"rgba(16,179,229,0.42)",

//地图描边颜色

borderColor:

"#0692a4",

},三、地图的美化

经过以上步骤，在中间区域呈现动态的美观的中国地图，且地图上呈现出放蜂路线的迁徙。四、大屏项目总结

到这里，一个完整的蜂行天下驾驶舱就全部结束了。在这个项目的实现过程中，你收获到vue中组件的使用方法、onMounted方法的使用、Flex布局、vue插槽、vue中使用echarts的方法。Vue+Echarts实现大数据的可视化是大数据专业学生的必备技能。希望你能反复练习项目，在项目的实现过程中巩固知识和技能，为就业打下扎实的基础。谢谢蜂行天下驾驶舱项目整体布局配置学习目标掌握flex布局的概念掌握vue插槽的概念132知识思政技能能设置自适应大屏能设置导航条培养科学探索精神培养中华美育精神一、大屏自适应设置

本项目为单页面大屏。页面中的各个元素要能够根据页面大小改变而随之改变,也就是要做到pc端分辨率的适配。目前比较常见的解决方案是使用flexible.js和rem结合解决。rem的全称是fontsizeoftherootelement（根元素的字体大小）,

是css3中新增的一个大小单位。rem是相对单位，它相对HTML根元素中font-size值的大小。浏览器的默认font-size是16px，1rem默认等于16px，所有浏览器均已支持rem。一、大屏自适应设置

lib-flexible是阿里团队开发的屏幕自适应解决方案，它可以快速实现一个自适应布局，非常实用。本项目就选用lib-flexible实现大屏的自适应布局。使用方法如下：步骤1：在项目终端下:使用npminstall--savelib-flexible下载插件。步骤2：下载完毕后，在main.js中import“lib-flexible/flexible.js引用插件步骤3：修改“lib-flexible/flexible.js中默认分辨率大小的计算。默认对540分辨率进行计算，把页面分为10份。根据实际情况，份数设置为24份，分辨率最小值为400，最大值为2560。修改部分的代码如下图红框所示。一、大屏自适应设置

修改部分代码如红框所示。function

refreshRem(){

var

width

=

docEl.getBoundingClientRect().width;

//if(width/dpr>540){

//

width=540*dpr;

//}

//varrem=width/10;

//默认值不足以支撑大屏项目，修改最小值为400，

最大值为2560

if(width

/

dpr

<

400){

width

=

400

*

dpr;

}else

if(width/dpr>2560){

width=2560*dpr;

}//默认为10份，本项目设计稿尺寸为1920，将宽度设置成24份，1920/24=80，1rem=80px

var

rem

=

width

/

24;

docEl.style.fontSize

=

rem

+

'px';

flexible.rem

=

win.rem

=

rem;

}一、大屏自适应设置

步骤4：在vscode商店下载cssrem插件，方便px到rem的计算。一、大屏自适应设置

步骤5：设置cssrem插件1rem=80px（插件->单击配置按钮->扩展设置-fontsize里面设置，重启vscode保证生效）一、大屏自适应设置

以上5步骤设置完毕后，在项目下的views

homePage.vue中写入测试代码。然后运行项目。一、大屏自适应设置

当页面大小改变时，页面上的文字大小随之发生改变。说明项目的自适应设置成功。91.75102.917二、大屏导航条设置

大屏导航条是指屏幕标题部分。首先设置背景图片。步骤为：1、把给定素材中的背景图片bj.jpg拷贝到项目的assets文件夹下。2、在App.vue文件中，设置背景图片或者背景颜色。代码如下：<template>

<router-view/></template>

<style

lang="less">body{

background:url(“~@/assets/bj.jpg”);//指定背景图片的url

background-repeat:no-repeat;//图片样式不重复

background-size:100%;

//设置图片大小

position:fixed;/*充满全屏*/

height:100%;//设置div高度

width:100%;//设置div宽度//background-color:#06164A//设置背景颜色}</style>二、大屏导航条设置

注意：App.vue在Vue项目中扮演着至关重要的角色。它是项目的根组件，也被视为项目的“首页”，负责整个应用的布局和内容展示。在App.vue文件包含了项目的全局数据和组件，是所有页面跳转的起点。在这个文件中，可以定义项目的全局样式、组件以及路由等，从而构建整个应用的结构。由于背景图片是整个页面的背景，是全局样式，所以背景图片设置代码要写在App.vue组件中。二、大屏导航条设置

背景图片设置完毕后，开始设置标题样式。在src-->views

新建页面组件，命名为homePage.vue，输入以下代码，设置标题的样式。<template>

<div><header><h1>蜂行天下驾驶舱大屏</h1></header></div></template><script>export

default{}</script>

<style

lang="less">header{

height:80px;

width:100%;

background-color:rgba(0,0,255,0.2);

h1{

font-size:.5rem;

color:#fff;

line-height:80px;

text-align:center;

}}</style>二、大屏导航条设置

注意：src/views：用于存放写好的页面，是页面级组件。二、大屏导航条设置

背景图片和标题设置完毕后，保存运行项目，得到效果图如下，有背景颜色，有标题。大屏上部分设置完毕。下面开始设置主体部分。三、flex布局大屏主体部分用来显示各种图表。在homePage.vue中增加一个<section>，并设置它的样式。<template>

<div><header><h1>蜂行天下驾驶舱大屏</h1></header></div>

<!--大容器-->

<section

class="container"></section>></template><style

lang="less">…//大容器的样式.container{min-width:1200px;//保证项目不是无限延申，不需要设置成rem，不需要改变，在1200-2048不需要改变固定值单位为pxmax-width:2048px;margin:0

auto;//大容器居中border:1px

solid

rgb(255,0,0);margin-left:0;padding:0.125rem

0.125rem

0;//距离顶部导航条上0.125rem，左右0.125remheight:500px;background-color:grey;}

</style>主体部分分为左、中、右三部分。左右放图表，中间放中国地图。三、flex布局左右部分又进一步分为3份，分别放3个图表。三、flex布局左中右三部分比例大概为3：5：3，页面整体布局示意图如下：三、flex布局Flex布局是一种简洁、灵活的布局方式,通过简单的属性设置就可以实现复杂的布局效果。该页面布局选用flex实现。Flex是FlexibleBox的缩写，意为”弹性布局”，是一种强大的CSS布局模式，常用于响应式设计和移动端开发中。任何一个容器都可以指定为Flex布局。在使用Flex布局中，首先要指定一个弹性容器。通过设置display属性来将一个元素设置为弹性容器。.container{display:flex;}三、flex布局将主体部分设置为flex容器，只需设置display属性为flex。然后在其中设置左中右三部分。通过设置flex的值，分割所占份数，完成页面布局。

<!--大容器-->

<section

class="container">

<!--