dataV大屏在vue中怎么使用

這篇文章主要介紹“dataV大屏在vue中怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“dataV大屏在vue中怎么使用”文章能幫助大家解決問題。

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

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

二、使用步驟

1.安裝依賴

npm install @jiaminghi/data-view

2.引入

（1）全局引入

在main.js中：

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

可以改成vue2使用：

（2）按需引入

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

3.使用

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

<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"  />
            </dv-border-box-1>
            <dv-border-box-8 class="border-box">
                <dv-scroll-board :config="config2" class="charts"  />
            </dv-border-box-8>
            <dv-border-box-1 class="border-box">
                <dv-scroll-ranking-board :config="config3" class="charts" />
            </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" />
            </dv-border-box-1>
        </div>
        <div class="box right">
            <dv-border-box-1 class="border-box">
                <dv-scroll-ranking-board :config="config3" class="charts"  />
            </dv-border-box-1>
             <dv-border-box-8 :reverse="true" class="border-box">
                <dv-conical-column-chart :config="config6" class="charts"  />
            </dv-border-box-8>
            <dv-border-box-1 class="border-box">
                <dv-capsule-chart :config="config7" class="charts"  />
            </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}

三、效果

關(guān)于“dataV大屏在vue中怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。