dataV大屏在vue中的使用方式

更新時間：2022年04月24日 11:29:27 作者：周小盜

這篇文章主要介紹了dataV大屏在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

隨著信息化的發(fā)展，大屏展示的需求越來越多，使用e-charts一個一個的做配置太麻煩，于是找到了封裝好的dataV，直接拿來用就可以實現(xiàn)酷炫的大屏效果。

（畫外音：部門接了幾個搞大屏的項目，技術總監(jiān)讓研究一下大屏項目通用性，然后我研究了一下dataV）附上官方API鏈接

一、dataV可以實現(xiàn)什么效果？

答：各種圖表大屏效果。（以下圖是從dataV可視化官網截出來的，此文章不講dataV可視化——拖拽+圖層類似PS，官網有教程，不需要編碼基礎，需要錢）

二、使用步驟

1.安裝依賴

npm install @jiaminghi/data-view

2.引入

（1）全局引入

在main.js中：

// 將自動注冊所有組件為全局組件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

哈哈，這篇和上一篇vue3一起寫的，用的同一個demo，不會vue3的看下我的上一篇文章，可以改成vue2使用：

（2）按需引入

import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

3.使用

test1.vue文件中：（在下面的demo中我使用了邊框、飛線圖增強版、錐形柱圖、膠囊柱圖、輪播表、排名輪播表等，在實際開發(fā)中看情況使用，以及布局均需根據(jù)實際開發(fā)情況調整）

<template>
? ? <dv-full-screen-container class="container">
? ? ? ? <div class="box left">
? ? ? ? ? ? <dv-border-box-1 class="border-box">
? ? ? ? ? ? ? ? <dv-capsule-chart :config="config7" class="charts" style="height:300px" />
? ? ? ? ? ? </dv-border-box-1>
? ? ? ? ? ? <dv-border-box-8 class="border-box">
? ? ? ? ? ? ? ? <dv-scroll-board :config="config2" class="charts" style="height:380px" />
? ? ? ? ? ? </dv-border-box-8>
? ? ? ? ? ? <dv-border-box-1 class="border-box">
? ? ? ? ? ? ? ? <dv-scroll-ranking-board :config="config3" class="charts" style="height:300px"/>
? ? ? ? ? ? </dv-border-box-1>
? ? ? ? ? ??
? ? ? ? </div>
? ? ? ? <div class="box center">
? ? ? ? ? ? <dv-border-box-1 class="border-box">
? ? ? ? ? ? ? ? <dv-flyline-chart-enhanced :config="config5" :dev="true" class="charts" style="height:800px"/>
? ? ? ? ? ? </dv-border-box-1>
? ? ? ? </div>
? ? ? ? <div class="box right">
? ? ? ? ? ? <dv-border-box-1 class="border-box">
? ? ? ? ? ? ? ? <dv-scroll-ranking-board :config="config3" class="charts" style="height:300px" />
? ? ? ? ? ? </dv-border-box-1>
? ? ? ? ? ? ?<dv-border-box-8 :reverse="true" class="border-box">
? ? ? ? ? ? ? ? <dv-conical-column-chart :config="config6" class="charts" style="height:350px;" />
? ? ? ? ? ? </dv-border-box-8>
? ? ? ? ? ? <dv-border-box-1 class="border-box">
? ? ? ? ? ? ? ? <dv-capsule-chart :config="config7" class="charts" style="height:300px" />
? ? ? ? ? ? </dv-border-box-1>
? ? ? ? </div>
? ? </dv-full-screen-container>
</template>

<script>
import {config1,config2,config3,config4,config5,config6,config7} from "./config.js"
export default {
? name: "test1",
? data: function() {
? ? return {
? ? ? ? config1,
? ? ? ? config2,
? ? ? ? config3,
? ? ? ? config4,
? ? ? ? config5,
? ? ? ? config6,
? ? ? ? config7
? ? ? ??
? ? }
? },
}
</script>

<style scoped>
.container{
? ? display: flex;
? ? flex-direction: row;
? ? background-color: #01132C; ? ?
}
.left,.right{
? ? width: 25%;
}
.center{
? ? width: 50%;
}
.box{
? ? display: flex;
? ? flex-direction: column;
}
.charts{
? ? width: 90%;
? ? margin: 5%; ??
}
</style>

config.js文件中：(靜態(tài)數(shù)據(jù)文件，在實際開發(fā)中可以換成從后臺獲取的數(shù)據(jù)；注意圖片的引用)

const config1={} 
const config2={
    header: ['列1', '列2', '列3'],
    data: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3']
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
    carousel: 'page'
}
const config3={
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南陽',
      value: 120
    },
    {
      name: '西峽',
      value: 78
    },
    {
      name: '駐馬店',
      value: 66
    },
    {
      name: '新鄉(xiāng)',
      value: 80
    },
    {
      name: '信陽',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
}
const config4={}
const config5={
  points: [
    {
      name: '鄭州',
      coordinate: [0.48, 0.35],
      icon: {
        src: require('@/assets/mapCenterPoint.png'),
        width: 30,
        height: 30
      },
      text: {
        color: '#fb7293'
      }
    },
    {
      name: '新鄉(xiāng)',
      coordinate: [0.52, 0.23]
    },
    {
      name: '焦作',
      coordinate: [0.43, 0.29]
    },
    {
      name: '開封',
      coordinate: [0.59, 0.35]
    },
    {
      name: '許昌',
      coordinate: [0.53, 0.47]
    },
    {
      name: '平頂山',
      coordinate: [0.45, 0.54]
    },
    {
      name: '洛陽',
      coordinate: [0.36, 0.38]
    },
    {
      name: '周口',
      coordinate: [0.62, 0.55]
    },
    {
      name: '漯河',
      coordinate: [0.56, 0.56]
    },
    {
      name: '南陽',
      coordinate: [0.37, 0.66]
    },
    {
      name: '信陽',
      coordinate: [0.55, 0.81]
    },
    {
      name: '駐馬店',
      coordinate: [0.55, 0.67]
    },
    {
      name: '濟源',
      coordinate: [0.37, 0.29]
    },
    {
      name: '三門峽',
      coordinate: [0.20, 0.36]
    },
    {
      name: '商丘',
      coordinate: [0.76, 0.41]
    },
    {
      name: '鶴壁',
      coordinate: [0.59, 0.18]
    },
    {
      name: '濮陽',
      coordinate: [0.68, 0.17]
    },
    {
      name: '安陽',
      coordinate: [0.59, 0.10]
    }
  ],
  lines: [
    {
      source: '新鄉(xiāng)',
      target: '鄭州'
    },
    {
      source: '焦作',
      target: '鄭州'
    },
    {
      source: '開封',
      target: '鄭州'
    },
    {
      source: '許昌',
      target: '鄭州'
    },
    {
      source: '平頂山',
      target: '鄭州'
    },
    {
      source: '洛陽',
      target: '鄭州'
    },
    {
      source: '周口',
      target: '鄭州'
    },
    {
      source: '漯河',
      target: '鄭州'
    },
    {
      source: '南陽',
      target: '鄭州'
    },
    {
      source: '信陽',
      target: '鄭州'
    },
    {
      source: '駐馬店',
      target: '鄭州'
    },
    {
      source: '濟源',
      target: '鄭州'
    },
    {
      source: '三門峽',
      target: '鄭州'
    },
    {
      source: '商丘',
      target: '鄭州'
    },
    {
      source: '鶴壁',
      target: '鄭州'
    },
    {
      source: '濮陽',
      target: '鄭州'
    },
    {
      source: '安陽',
      target: '鄭州'
    }
  ],
  icon: {
    show: true,
    src: require('@/assets/mapPoint.png')
  },
  text: {
    show: true,
  },
  bgImgSrc: require('@/assets/map.jpg')
}
const config6={
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南陽',
      value: 120
    },
    {
      name: '西峽',
      value: 71
    },
    {
      name: '駐馬店',
      value: 66
    },
    {
      name: '新鄉(xiāng)',
      value: 80
    },
    {
      name: '信陽',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png'),
    require('@/assets/mapPoint.png')
  ],
  showValue: true
}
const config7={
  data: [
    {
      name: '南陽',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '鄭州',
      value: 55
    },
    {
      name: '西峽',
      value: 98
    },
  ],
  unit: 'ml'
}
export { config1,config2,config3,config4,config5,config6,config7}