Echarts学习笔记6（项目搭建、项目分辨率响应式创建、页面及前期准备）

最新推荐文章于 2024-06-18 22:15:51 发布

官方认证新生代农民工_平安喜乐

最新推荐文章于 2024-06-18 22:15:51 发布

阅读量619

点赞数

分类专栏： Echarts（5.0）笔记文章标签： echarts 学习 vue.js

本文链接：https://blog.csdn.net/weixin_60968779/article/details/124511472

版权

笔记同时被 2 个专栏收录

102 篇文章 3 订阅

订阅专栏

Echarts（5.0）

8 篇文章 0 订阅

订阅专栏

vue3.0项目创建

1.电脑上安装node.js

网址：Node.js

下载自己对应操作系统版本安装即可

2.全局下载项目脚手架

打开cmd 输入 npm install -g @vue/cli

3.创建项目

把cmd的路径切换到指定路径下 vue create 项目名

(3-1)选择项目配置模板 选择第三项自主选择你项目所需的配置

Please pick a preset:
Default ([Vue 2] babel, eslint) vue cli 2 默认的项目模板
Default (Vue 3 Preview) ([Vue 3] babel, eslint) vue cli 3 默认的项目模板
❯ Manually select features

(3-2)选择项目配置选项勾选所需要的模块

? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

(3-3)选择想要开始项目的Vue.js版本选择 3.x

? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x (Preview)

(3-4)是否用history模式来创建路由直接回车默认项目

? Use history mode for router? (Requires proper server setup for index fallback in pr
oduction) (Y/n)

(3-5)选择CSS 预处理类型选择LESS

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
❯ Less
Stylus

(3-6) 选择代码校验会犯选择第一项只进行报错提醒

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

(3-7)询问项目的什么时候校验格式(第一个是保存时，第二个是提交时)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to
invert selection)
❯◉ Lint on save
◯ Lint and fix on commit

(3-8)询问项目的配置文件放在那里 (1.独立文件 2.package.json中)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json

(3-9)是否保存配置当做后续项目的可选配置我们选择不保存

? Save this as a preset for future projects? (y/N)

运行项目

把cmd的路径切换到你项目名下

npm run serve 启动项目

2.项目初始化？

1.删除src文件夹下的cpmponents文件夹下的Helloword.vue文件

2.删除vuews下的两个.vue文件

3.在views中新建我们的页面文件 homePage.vue文件

<template>
  <div>
      我是页面
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style

4.修改router下的index.js配置路由文件

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/page',
    name: 'About',
    component: () => import('../views/homePage.vue')
  },
  // 设置路由重定向
  {
    path:"/",
    redirect:"/page"
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

5修改根组件默认显示内容与初始化项目样式

<template>
  <router-view/>
</template>

<style lang="less">
  *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;//border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
  }
</style>

到此为止项目已经初始化完毕

项目分辨率响应式分析与实施

项目基本结构

技术栈

vue3.0+vue-router4.0+axios
flex布局
LESS
rem屏幕适配
echarts5.0

项目分辨率响应式创建

我们的项目是需要根据页面的大小改变做出响应式改变的所以我们可以使用

我们可以使用第三方插件flexible.js帮助我们修改html根节点的font-size大小从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变

flexible.js

flexible.js web自适应方案阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

1.下载 npm i -S lib-flexible

2.在main.js中进行配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import 'lib-flexible/flexible.js'

createApp(App).use(store).use(router).mount('#app')

3.修改flexible配置

因为默认情况下只会在540px分辨率一下生效所以我们需要根据我们的项目分辨率进行调整

在node_module/lib-flexible/flexible.js中修改代码如下

  // 修改原始的
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;

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

这个时候重启项目大家打开浏览器调试器即可发现在浏览器大小改变的时候在html根节点上会自动设置一个font-size

cssrem插件

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

配置方式

在vscode扩展中找到 cssrem插件最新名字叫px to rem & rpx 安装到vscode中点击右下角设置

修改Root Font Size（基准font-size）配置项为80即可

测试与使用

在写css的时候就会出现相应的rem转换结果

项目顶部信息条创建

1.设置背景图

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

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

2.设置标题文字

<template>
  <div>
      <header>
          <h1>大数据可视化--vue3.0与echarts</h1>
      </header>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
    header{
        height: 1rem;
        width: 100%;
        /* 设置一个半透明淡蓝色 */
        background-color: rgba(0, 0, 255, .2);
        /* 把标题文字样式设置 */
        h1{
            font-size: .375rem;
            color:#fff;
            text-align: center;
            line-height: 1rem;
        }
    }
</style>

页面主体创建

主体部分是下面的左中右

大容器

1.创建一个大容器来容纳绿色红色黄色三个区域

在homepage.vue页面中创建一个大容器

<template>
  <div>
      <header>
          <h1>大数据可视化--vue3.0与echarts</h1>
      </header>
      <!-- 大容器 -->
      <section class=“container”>

      </section>
  </div>
</template>

创建容器样式

<style lang="less">
    header{
        height: 1rem;
        width: 100%;
        /* 设置一个半透明淡蓝色 */
        background-color: rgba(0, 0, 255, .2);
        /* 把标题文字样式设置 */
        h1{
            font-size: .375rem;
            color:#fff;
            text-align: center;
            line-height: 1rem;
        }
    }
    // 主体容器样式
    .container{
        // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
        min-width: 1200px;
        max-width: 2048px;
        margin: 0 auto;
        // 盒子上10px 左右10px 下0的外边距
        padding: .125rem .125rem 0;
        // 测试完成看到样式就删除掉
        height: 500px;
        background-color: gray;
    }
</style>

左中右

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

1.创建左中右三个页面容器

<template>
  <div>
      <header>
          <h1>大数据可视化--vue3.0与echarts</h1>
      </header>
      <!-- 大容器 -->
      <section class='container'>
          <!-- 左容器 -->
          <section class='itemLeft'>1</section>
          <!-- 中容器 -->
          <section class='itemCenter'>2</section>
          <!-- 右容器 -->
          <section class='itemRight'>3</section>
      </section>
  </div>
</template>

2.设置样式

<style lang="less">
    header{
        height: 1rem;
        width: 100%;
        /* 设置一个半透明淡蓝色 */
        background-color: rgba(0, 0, 255, .2);
        /* 把标题文字样式设置 */
        h1{
            font-size: .375rem;
            color:#fff;
            text-align: center;
            line-height: 1rem;
        }
    }
    // 主体容器样式
    .container{
        // 这里就不需要设置使用rem了
        min-width: 1200px;
        max-width: 2048px;
        margin: 0 auto;
        // 盒子上10px 左右10px 下0的外边距
        padding: .125rem .125rem 0;
        display: flex;//父容器设置flex布局才能在子元素使用

        // 设置左中右的占比 但是不要忘了在父容器要设置flex
        .itemLeft,.itemRight{
            flex: 3;
        }
        .itemConter{
            flex: 5;
        }

    }
</style>

运行之后会发现页面的左和右占比是页面各的3份。而中间是占比5份

左右图表展示区块容器样式

大家会发现我们要展示的4个区域的容器效果是一样的。所以我们可以剥离成一个组件然后重复调用即可。并且在其中放置slot槽口后期方便向容器内插入图表

创建容器组件

在components文件夹下创建 itemPage.vue

<template>
  <div>
      容器组件
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

编写样式与插槽

<template>
  <div class='item'>
      <!-- 设置插槽 -->
      <slot/>
  </div>
</template>

<script>
export default {

}
</script>

<style>
    .item{
        /* 高度410px */
        height: 5.125rem;
        border: 1px solid blue;
        /* 外边距20px */
        margin: .25rem; 
      background-color: rgba(13, 130, 255, 0.851);
    }
</style>

在views下的homePage中引用调用使用

<template>
  <div>
      <header>
          <h1>大数据可视化--vue3.0与echarts</h1>
      </header>
      <!-- 大容器 -->
      <section class='container'>
          <!-- 左容器 -->
          <section class='itemLeft'>
              <!-- 使用组件 -->
              <ItemPage/>
              <ItemPage/>
          </section>
          <!-- 中容器 -->
          <section class='itemCenter'>2</section>
          <!-- 右容器 -->
          <section class='itemRight'>
              <!-- 使用组件 -->
              <ItemPage/>
              <ItemPage/>
          </section>
      </section>
  </div>
</template>

<script>
// 引用组件
import ItemPage from "@/components/itemPage.vue"
export default {
    components:{
        ItemPage
    }
}
</script>

运行之后大家会发现左右区块就展现出4个容器

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

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

1.创建4个组件在components下 itemOne.vue等等一共4个

然后在4个文件中分别设置相关内容与样式（每个图表的标题不一样要修改）

<template>
  <div>
      <h2>图表1</h2>
      <div class="chart">
          容纳后期的图表
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    h2{
        /* 48像素 */
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.25rem;

    }
    .chart{
        /* 高度360 */
        height: 4.5rem;
        background-color: gray;
    }
</style>

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

<template>
  <div>
      <header>
          <h1>大数据可视化--vue3.0与echarts</h1>
      </header>
      <!-- 大容器 -->
      <section class='container'>
          <!-- 左容器 -->
          <section class='itemLeft'>
              <!-- 使用组件 -->
              <ItemPage><itemOne/></ItemPage>
              <ItemPage><itemTwo/></ItemPage>
          </section>
          <!-- 中容器 -->
          <section class='itemCenter'>2</section>
          <!-- 右容器 -->
          <section class='itemRight'>
              <!-- 使用组件 -->
             <ItemPage><itemThree/></ItemPage>
              <ItemPage><itemFour/></ItemPage>
          </section>
      </section>
  </div>
</template>

<script>
// 引用组件
import ItemPage from "@/components/itemPage.vue"

// 左右4个小组件的引用
import itemOne from "@/components/itemOne.vue"
import itemTwo from "@/components/itemTwo.vue"
import itemThree from "@/components/itemThree.vue"
import itemFour from "@/components/itemFour.vue"


export default {
    components:{
        ItemPage,itemOne,itemTwo,itemThree,itemFour
    }
}
</script>

中间地图区域容器样式

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

 .itemCenter{
    // 高度840px
       height: 10.5rem; 
       border: 1px solid blue;
    //    内边距10px
       padding: 0.125rem; 
    //    外边距20px
       margin: 0.25rem; 
    }

图表前期准备

全局设置Echarts与axios

Charts 全局引用

1.下载 npm install --save echarts

2.0的写法

在vue2.0中使用如下写法吧echarts挂载在vue实例上但是这招在3.0行不通了

在main.js中进行引用和调用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import 'lib-flexible/flexible.js'
// 引用echarts
import * as echarts from "echarts"
Vue.prototype.$echarts=echarts;


createApp(App).use(store).use(router).mount('#app')

vue3中使用Provide/Inject依赖注入，将替代vue2中在原型链上挂载一些属性

在app.vue中使用provider来给后代们提供数据

<script>
// 1.引用proivde
import {provide} from "vue"
// 2.引用echarts
import * as echarts from "echarts"
export default {
  setup() {
    provide("echarts",echarts)//第一个参数是名字  第二个参数是你传递的内容
  },
}
</script>

在想使用的组件中使用inject来接受

在views下的homePage.vue测试

// 引用inject
import {inject} from 'vue'
export default {
    components:{
        ItemPage,itemOne,itemTwo,itemThree,itemFour
    },
    setup(){
    //   测试使用echarts
       let $echarts= inject("echarts")
        console.log($echarts)
    }
}

大家在console中可以看到可以正常使用了

axios全局引用

axios使用于上面相同方式

1.下载 npm install --save axios

2.在app.vue中使用provider来给后代们提供数据

<script>
// 1.引用proivde
import {provide} from "vue"
// 2.引用echarts
import * as echarts from "echarts"
// 引用axios
import axios from 'axios'
export default {
  setup() {
    provide("echarts",echarts)//第一个参数是名字  第二个参数是你传递的内容
    provide("axios",axios)//第一个参数是名字  第二个参数是你传递的内容
  },
}
</script>

在想使用的组件中使用inject来接受

在views下的homePage.vue测试

// 引用inject
 import {inject} from 'vue'
export default {
    components:{
        ItemPage,itemOne,itemTwo,itemThree,itemFour
    },
    setup(){
    //   测试使用echarts
       let $echarts= inject("echarts")
       let $http= inject("axios")
        console.log($echarts)
        console.log($http)
    }
}

官方认证新生代农民工_平安喜乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习笔记6（项目搭建、项目分辨率响应式创建、页面及前期准备）

vue3.0项目创建1.电脑上安装node.js网址：Node.js下载自己对应操作系统版本安装即可2.全局下载项目脚手架打开cmd 输入 npm install -g @vue/cli3.创建项目把cmd的路径切换到指定路径下 vue create 项目名(3-1)选择项目配置模板选择第三项自主选择你项目所需的配置Please pick a preset: Default ([Vue 2] babel, eslint) vue cli 2 默认的项目模板...
复制链接

扫一扫