基于外卖业务的数据可视化入门到精通-Vue3.0+EChart4.0

标签：vue components color height width EChart4.0 Vue3.0 外卖 rem

基于外卖业务的数据可视化入门到精通-Vue3.0+EChart4.0

项目分辨率响应式创建 

项目顶部信息条创建 

页面主体创建 

 

接项目搭建与初始化之后继续对项目进行部署工作

项目展示：

        技术栈：

1. vue3.0+vue-router4.0+axios 2. flex 布局 3. LESS 4. rem 屏幕适配 5. echarts5.0

项目分辨率响应式创建 

        对插件进行下载

npm i -S lib-flexible

 

        到main.js中引用插件

import 'lib-flexible/flexible.js'

 

         修改flexible配置

        找到71行到74行并修改默认的分辨率配置 

1.   // 修改成为
2.   // 最小400px，最大适配2560px
3.   if (width / dpr < 400) {
4.   width = 400 * dpr;
5.   } else if (width / dpr > 2560) {
6.   width = 2560 * dpr;
7.   }
8.   // 设置成24等份，设计稿时1920px的，这样1rem就是80px （1920/24=80）方便使用
9.   var rem = width / 24;

 

         Visual Studio Code中下载rem工具

        我们在写代码的时候发现如果我们都根据80px 为 1rem 在编写代码的时候转换非常的麻烦 所以我们可以 在 vscode 中安装一个 cssrem 的插件帮助我们进行转换 这样一来开发过程中会更加的方便

项目顶部信息条创建 

        将准备好的背景图放到目录下

        把图片方法assets文件夹中 在app.vue中设置背景图 

1.   body{
2.   background: url('~@/assets/bg.jpg') top center no-repeat;
3.   }

 

        查看页面背景图的效果

        安装 less 和 less-loader 两个包 

npm install less less-loader --save-dev

 

        设置标题文字样式

1.   <template>
2.   <div>
3.   <header>
4.   <h1>可视化演练</h1>
5.   </header>
6.   </div>
7.   </template>
8.    
9.    
10.   <style lang="less">
11.   header{
12.   height: 100px;
13.   width: 100%;
14.   background-color: rgba(0,0,255,0.2);
15.   }
16.   h1{
17.   font-size: 2rem;
18.   text-align: center;
19.   color: white;
20.   line-height: 6rem;
21.   }
22.   </style>

 

         页面中查看效果

页面主体创建 

        创建大容器

1.   <template>
2.   <div>
3.   <header>
4.   <h1>可视化项目</h1>
5.   </header>
6.   <!--大容器-->
7.   <section class="cot">
8.    
9.   </section>
10.   </div>
11.   </template>
12.    
13.    
14.   <style lang="less">
15.   header{
16.   height: 1rem;
17.   width: 100%;
18.   /* 设置一个半透明淡蓝色 */
19.   background-color: rgba(0, 0, 255, .2);
20.   /* 把标题文字样式设置 */
21.   h1{
22.   font-size: .375rem;
23.   color:#fff;
24.   text-align: center;
25.   line-height: 1rem;
26.   }
27.   }
28.   // 主体容器样式
29.   .cot{
30.   // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
31.   min-width: 1200px;
32.   max-width: 2048px;
33.   margin: 0 auto;
34.   // 盒子上10px 左右10px 下0的外边距
35.   padding: .125rem .125rem 0;
36.   // 测试完成看到样式就删除掉
37.   height: 500px;
38.   background-color: gray;
39.   }
40.   </style>

 

 左中右容器

        接下来我们可以创建左中右这三个部分。那么他们的占比分别是3 5 3 这个时候我们可以使用flex布局来 分割他们所占的区块大小

1.   <!--大容器-->
2.   <section class="cot">
3.   <!-- 左容器 -->
4.   <section class='itemLeft'>1</section>
5.   <!-- 中容器 -->
6.   <section class='itemCenter'>2</section>
7.   <!-- 右容器 -->
8.   <section class='itemRight'>3</section>
9.   </section>

 

         容器样式设置

1.   .itemLeft,.itemRight{
2.   flex: 3;
3.   }
4.   .itemCenter{
5.   flex: 5;
6.   }

 

        创建容器组件 

        ·在组件目录下自定义新建一个组件文件

 

        设置样式与插槽

1.   <template>
2.   <div class='itemPage'>
3.   <!-- 设置插槽 -->
4.   <slot>
5.    
6.   </slot>
7.   </div>
8.   </template>
9.    
10.   <script>
11.   export default {
12.    
13.   }
14.   </script>
15.    
16.   <style>
17.    
18.   .itemPage{
19.   /* 高度410px */
20.   height: 5.125rem;
21.   border: 1px solid blue;
22.   /* 外边距20px */
23.   margin: .25rem;
24.   background-color: rgba(13, 130, 255, 0.851);
25.   }
26.   </style>

 

在主页面组件的引用

1.   <template>
2.   <div>
3.   <header>
4.   <h1>可视化项目</h1>
5.   </header>
6.   <!--大容器-->
7.   <section class="cot">
8.   <!-- 左容器 -->
9.   <section class='itemLeft'>
10.   <ItemPage />
11.   <ItemPage />
12.   </section>
13.   <!-- 中容器 -->
14.   <section class='itemCenter'></section>
15.   <!-- 右容器 -->
16.   <section class='itemRight'>
17.   <ItemPage />
18.   <ItemPage />
19.   </section>
20.   </section>
21.   </div>
22.   </template>
23.    
24.   <script>
25.   import ItemPage from "@/components/itemPage.vue"
26.   export default {
27.   //调用组件
28.   components:{
29.   ItemPage
30.   }
31.   }
32.   </script>

 

        每个区块内容插入容器槽口

        一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且 分别显示 

对四个槽口写入内容

1.   <template>
2.   <div>
3.   <h2>A</h2>
4.   <div class="chart">
5.   容纳后期的图表
6.   </div>
7.   </div>
8.   </template>
9.    
10.   <script>
11.   export default {
12.   }
13.   </script>
14.    
15.   <style scoped>
16.   h2{
17.   /* 48像素 */
18.   height: 0.6rem;
19.   color: #fff;
20.   line-height: 0.6rem;
21.   text-align: center;
22.   font-size: 0.25rem;
23.   }
24.   .chart{
25.   /* 高度360 */
26.   height: 4.5rem;
27.   background-color: gray;
28.   }
29.   </style>

 

        在homePage.vue中引用调用使用这4个组件

1.   <template>
2.   <div>
3.   <header>
4.   <h1>可视化项目</h1>
5.   </header>
6.   <!--大容器-->
7.   <section class="cot">
8.   <!-- 左容器 -->
9.   <section class='itemLeft'>
10.   <ItemPage>
11.   <itmeA/>
12.   </ItemPage>
13.    
14.   <ItemPage>
15.   <itmeB/>
16.   </ItemPage>
17.   </section>
18.   <!-- 中容器 -->
19.   <section class='itemCenter'></section>
20.   <!-- 右容器 -->
21.   <section class='itemRight'>
22.   <ItemPage>
23.   <itmeC/>
24.   </ItemPage>
25.    
26.   <ItemPage>
27.   <itmeD/>
28.   </ItemPage>
29.   </section>
30.   </section>
31.   </div>
32.   </template>
33.    
34.   <script>
35.   import ItemPage from "@/components/itemPage.vue"
36.    
37.   import itmeA from "@/components/itmeA.vue"
38.   import itmeB from "@/components/itmeB.vue"
39.   import itmeC from "@/components/itmeC.vue"
40.   import itmeD from "@/components/itmeD.vue"
41.    
42.   export default {
43.   //调用组件
44.   components:{
45.   ItemPage,
46.   itmeA,
47.   itmeB,
48.   itmeC,
49.   itmeD
50.   }
51.   }
52.   </script>

 

         中间地图区域容器样式

        在views 文件夹下的 homePage 。 vue 中设置中间区域容器样式

1.   .itemCenter{
2.   // 高度840px
3.   height: 10.5rem;
4.   border: 1px solid blue;
5.   // 内边距10px
6.   padding: 0.125rem;
7.   // 外边距20px
8.   margin: 0.25rem;
9.   }

 

 

标签：vue,components,color,height,width,EChart4.0,Vue3.0,外卖,rem
From： https://www.cnblogs.com/web1123/p/18394125