效果圖

技術(shù)架構(gòu)：datav，vue2，echarts

我們一步一步的來實現(xiàn)一個簡單的可視化數(shù)據(jù)大屏，開始吧！！

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，路由設(shè)置

? ? ? ? 4.1 vue項目里找到src/views文件夾，在文件夾下新建一個index的文件夾，在index里新建一個InDex.vue的一個文件

? ? ? ? ?4.2 在新建的InDex.vue文件里寫入以下內(nèi)容，然后保存

<template>
  <div>
    <h1>我是主屏幕</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

? ? ? ? 4.3?在找到vue項目里src/router/index.js下的js文件，在這個文件里，我們將我們上一步所創(chuàng)建的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.在控制臺執(zhí)行 npm run serve,打開鏈接，當(dāng)出現(xiàn)以下頁面后，就代表著設(shè)置成功了

? ? ? ?

?5.主體搭建

? ? ? ? 當(dāng)我們路由綁定好組件后，我們就可以開始設(shè)計我們的大屏啦，首先，我們找到vue項目文件下的src/views/index/InDex.vue的文件里面。進(jìn)入到文件里面后，我們首先打開datav的官網(wǎng)介紹 | DataV

?在官網(wǎng)里面我們可以在里面找我們需要的一些組件框架啦，有一點需要注意，數(shù)據(jù)大屏有一個特殊的地方就是能夠自適應(yīng)屏幕大小，datav提供給了我們一個全屏容器，第一步就是使用全屏容器組件，我們后續(xù)的html代碼都將寫在這全屏容器里面

?vue項目里InDex.vue文件里的代碼

<template>
  <div>
    <dv-full-screen-container>全屏組件</dv-full-screen-container>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在全屏組件里我們可以寫我們的大屏組件啦，首先我們先寫入一個最外層的邊框

datav給我們提供了很多的外層邊框選項，我們先隨便選擇一個?

?vue項目里InDex.vue文件里的代碼

<template>
  <div >
    <dv-full-screen-container class=box>
      <dv-border-box-11 title="測試">

      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.box{
  background-color: black;
}
</style>

實際效果

?大屏里加入datav組件，頁面美化，

首先看下datav官方提供了哪些組件

?這里我就隨便找一個來演示，vue項目里InDex.vue文件里的代碼這樣寫入

<template>
  <div>
    <dv-full-screen-container class="box">
      <dv-border-box-11 title="測試">
        <!-- 小圖表的外邊框組件 -->
        <dv-border-box-1 class="box1">
          <!-- 小圖表圖標(biāo)組件 -->
          <dv-capsule-chart
            :config="config"
            style="width: 400px; height: 300px;margin-left:10px;margin-top:10px"
        /></dv-border-box-1>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {//組件的配置數(shù)據(jù)
        data: [
          {
            name: '南陽',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '鄭州',
            value: 55
          },
          {
            name: '西峽',
            value: 98
          },
        ]
      },
      unit: '單位'
    }
  }
}


</script>

<style>
/* 根據(jù)具體的情況對圖表進(jìn)整體的布局以及css的修改 */
.box {
  background-color: black;
}
.box1{
  margin-left:20px;
  padding-top:40px;
  height:320px;
  width:420px
}
</style>

效果

?這樣一個簡易版的大屏就設(shè)計好啦 后續(xù)可根據(jù)實際情況對大屏進(jìn)行修改和內(nèi)容的加強(qiáng)，下期我們講在大屏里把echarts的一些圖表給加入進(jìn)來，附git地址 git@gitee.com:hu-wenwu/banana.git文章來源地址http://www.zghlxwxcb.cn/news/detail-458312.html

到了這里，關(guān)于前端可視化數(shù)據(jù)大屏（1）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！