可视化大屏-前端_电脑百科

算账

ZxID：29357411

等级: 版主

配偶: 浓酒与歌

举报图酷模式

只看楼主使用道具楼主发表于: 2023-08-16 0

技术架构：datav，vue2，echarts

我们一步一步的来实现一个简单的可视化数据大屏，开始吧！！

1，vue脚手架搭建项目
太简单了，百度上可以搜索，我这里就不多说了，把router装好就行

2，datav的安装与配置
2.1在控制台上输入命令下载datav

引用
npm install @jiaminghi/data-view

2.2 将datav的组件注册为全局组件

在min.js文件里，注册datav为全局组件，代码如下

复制代码

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

3,echarts的安装与配置
3.1.在控制台上输入命令下载echarts

复制代码

npm install echarts --save

4，路由设置
4.1 vue项目里找到src/views文件夹，在文件夹下新建一个index的文件夹，在index里新建一个InDex.vue的一个文件

4.2 在新建的InDex.vue文件里写入以下内容，然后保存

复制代码

<template>
<div>
<h1>我是主屏幕</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

4.3 在找到vue项目里src/router/index.js下的js文件，在这个文件里，我们将我们上一步所创建的vue组件和路由绑定。代码如下

复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component:()=> import('../views/index/InDex.vue') // 路由懒加载，括号里的路径是要绑定的路由的路径
}
]
const router = new VueRouter({
routes
})
export default router

4.4.在控制台执行 npm run serve,打开链接，当出现以下页面后，就代表着设置成功了

5.主体搭建

当我们路由绑定好组件后，我们就可以开始设计我们的大屏啦，首先，我们找到vue项目文件下的src/views/index/InDex.vue的文件里面。进入到文件里面后，我们首先打开datav的官网介绍 | DataV

在官网里面我们可以在里面找我们需要的一些组件框架啦，有一点需要注意，数据大屏有一个特殊的地方就是能够自适应屏幕大小，datav提供给了我们一个全屏容器，第一步就是使用全屏容器组件，我们后续的html代码都将写在这全屏容器里面