前端可视化数据大屏适配方式(前端可视化数据大屏源码)

前端可视化数据大屏效果图

技术架构：datav、vue2、echarts

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

1，vue脚手架搭建项目

太简单了。你可以去百度搜索一下。这里我就不详细说了。只需安装路由器即可。

2，datav的安装与配置

2.1在控制台输入命令下载datav

npminstall@jiaminghi/data-view

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

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

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

3,echarts的安装与配置

3.1。在控制台输入命令下载echarts

npm安装echarts--save

4，路由设置

4.1找到vue项目中的src/views文件夹，在该文件夹下新建index文件夹，在index中新建InDex.vue文件

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

templatedivh1我是主屏/h1/div/templatescriptexportdefault{}/scriptstyle/style

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

从'vue'导入Vue从'vue-router'导入VueRouterVue.use(VueRouter)const路由=[{path:'/',name:'home',component:()=import('./views/index/InDex.vue')//延迟加载路由，括号内的路径是要绑定的路由的路径}]constrouter=newVueRouter({routes})exportdefaultrouter

4.4.在控制台中执行npmrunserve并打开链接。当出现如下页面时，表示设置成功。

5.主体搭建

在我们对组件进行布线和绑定之后，我们就可以开始设计我们的大屏幕了。首先我们找到vue项目文件下的src/views/index/InDex.vue文件。进入文件后，我们首先打开datav的官网介绍|数据V

在官网上，我们可以找到一些我们需要的组件框架。需要注意的是，大数据屏有一个特殊的功能，就是能够自适应屏幕尺寸。datav为我们提供了一个全屏容器。第一步是使用全屏容器组件，我们后续的html代码都会写在这个全屏容器中

vue项目中InDex.vue文件中的代码

模板divdv-full-screen-container全屏组件/dv-full-screen-container/div/templatescriptexport默认{}/scriptstyle/style

在全屏组件中，我们可以编写我们的大屏组件。首先，我们写一个最外层的边框。

datav为我们提供了很多外边框选项，我们先随机选择一个

vue项目中InDex.vue文件中的代码

模板divdv-full-screen-containerclass=boxdv-border-box-11title='Test'/dv-border-box-11/dv-full-screen-container/div/templatescriptexport默认{}/scriptstyle。框{背景颜色：黑色；}/样式

实际效果

大屏添加datav组件，美化页面。

首先我们来看看datav官方提供了哪些组件。

这里我就随便找一个来演示一下。vue项目中InDex.vue文件中的代码是这样写的

templatedivdv-full-screen-containerclass='box'dv-border-box-11title='Test'!--小图表的外边框组件--dv-border-box-1class='box1'！--小图表图标组件--dv-capsule-chart:config='config'style='width:400px;高度：300px；边距-left:10px；margin-top:10px'//dv-border-box-1/dv-border-box-11/dv-full-screen-container/div/templatescriptexportdefault{data(){return{config:{//组件配置数据data:[{name:'南阳',value:167},{name:'周口',value:67},{name:'漯河',value:123},{name:'郑州',value:55},{name:'西夏',value3336098},]},unit:'unit'}}}/scriptstyle/*根据具体图表的整体布局和css进行修改*/.box{background-color:black;}.box1{margin-left:20px;填充顶部：40px；高度：320px；宽度：420px}/样式

影响

这样一个简单版的大屏就设计完成了。未来可以根据实际情况对大屏幕进行修改，增强内容。下一期我们会将echarts中的一些图表添加到大屏上。下一期见。如果想要源码可以私聊。哦我！