当前位置：首页 > news >正文

vue2+datav可视化数据大屏（1）

news 2025/8/4 6:05:07

开始

📓 最近打算出一个前端可视化数据大屏的系列专栏，这次将很全面的教大家设计可视化大屏，从开始到打包结束，其中，包括如何设计框架，如何封装axios，等等，本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vue3项目到最后的项目打包，本篇共计4小节。

1.安装脚手架

📓 首先确保电脑上安装node.js，node安装简单，去官网下载安装包一件安装即可，当安装了node.js后，我们新建一个文件夹，用vscode打开文件夹，打开终端，安装脚手架。

npm install -g @vue/cli

📓脚手架安装一次即可，后续在创建vue项目就不需要在重新安装脚手架

2，创建vue2项目

📓打开vscode 在终端输入，myapp是我们的项目名称

 vue create myapp

📓 选择我们需要的内容，这里需要的是vue-router，其他的按自己的需需求选择

3.下载我们需要的第三方库

📓这里我们需要的是，moke,datav,echarts,axios

📓在控制台下载即可

📓下载mock

npm install mockjs --save-dev

📓下载datav

npm install @jiaminghi/data-view  --save

📓下载axios

npm install axios --save

📓下载echarts

npm install echarts  --save

4.在页面上使用datav

📓在src文件夹下面，有个app.vue的入口文件，我们将这个文件处理下，将一些无语的代码删除，保留如下代码

📓将src--views下的vue文件全部删除

📓在views创建一个新的文件 IndexData.vue，并在里面写入如下代码

<template><div>{{ a }}</div>
</template>
<script>
export default{data(){return{a:"123"}}
}
</script>
<style></style>

📓在src--router文件夹下将该组件绑定路由

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: ()=>import("../views/IndexData.vue")},]const router = new VueRouter({routes
})export default router

📓然后启动服务，当页面上出现123时间，就代表着配置成功

5.配置第一个datav组件

5.1 📓在src下的main.js文件里面，完全引入我们的datav组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import dataV from '@jiaminghi/data-view'  //导入datav框架
Vue.config.productionTip = false
Vue.use(dataV)  //添加到vue原型里去
new Vue({router,render: h => h(App)
}).$mount('#app')

5.2 📓在页面上使用我们的datav组件

<template><div><!-- 引入组件 --><dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div>
</template>
<script>
export default{data(){return{config:{ //传入组件数据data:[66]}}}
}
</script>
<style></style>

5.3 📓当出现下方的效果时，就代表着使用成功

6，设计主体框架

📓我打算在indexdata.vue里作为组件的容器，在容器里设计骨架，将其他的内容作为骨架填入，代码如下

<template><!-- 全屏容器 --><dv-full-screen-container style="background-color: black;"><dv-border-box-11 title="香蕉麻花皮演示"><!-- 我这里将页面分为上中下三块，这是第一块 --><div class="box"><!-- 在里面在分成左中右3块 --><div class="box1"><dv-border-box-12>dv-border-box-1</dv-border-box-12></div><div class="box1"><dv-border-box-2>dv-border-box-1</dv-border-box-2></div><div class="box1"><dv-border-box-10>dv-border-box-1</dv-border-box-10></div></div><!-- 第二块 --><div class="box"><!-- 在里面在分成左中右3块 --><div class="box1"><dv-border-box-9>dv-border-box-1</dv-border-box-9></div><div class="box1"><dv-border-box-8>dv-border-box-1</dv-border-box-8></div><div class="box1"><dv-border-box-7>dv-border-box-1</dv-border-box-7></div></div><!-- 第三块 --><div class="box"><!-- 在里面在分成左中右3块 --><div class="box1"><dv-border-box-2>dv-border-box-1</dv-border-box-2></div><div class="box1"><dv-border-box-3>dv-border-box-1</dv-border-box-3></div><div class="box1"><dv-border-box-8>dv-border-box-1</dv-border-box-8></div></div></dv-border-box-11></dv-full-screen-container>
</template>
<script>
export default {data() {return {config: { //传入组件数据}}}
}
</script>
<style scoped>
.box1 {width: 610px;height: 310px;
}
.box{display: flex;justify-content: space-between; width: 98%;margin: auto;padding-top: 40px;
}
</style>

📓效果如下