dataV大屏在vue中的使用方式
更新時(shí)間：2022年04月24日 11:29:27 作者：周小盜
這篇文章主要介紹了dataV大屏在vue中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
前言
隨著信息化的發(fā)展，大屏展示的需求越來(lái)越多，使用e-charts一個(gè)一個(gè)的做配置太麻煩，于是找到了封裝好的dataV，直接拿來(lái)用就可以實(shí)現(xiàn)酷炫的大屏效果。
（畫外音：部門接了幾個(gè)搞大屏的項(xiàng)目，技術(shù)總監(jiān)讓研究一下大屏項(xiàng)目通用性，然后我研究了一下dataV）附上官方API鏈接
一、dataV可以實(shí)現(xiàn)什么效果？
答：各種圖表大屏效果。（以下圖是從dataV可視化官網(wǎng)截出來(lái)的，此文章不講dataV可視化——拖拽+圖層類似PS，官網(wǎng)有教程，不需要編碼基礎(chǔ)，需要錢）
二、使用步驟
1.安裝依賴
npm install @jiaminghi/data-view
2.引入
（1）全局引入
在main.js中：
// 將自動(dòng)注冊(cè)所有組件為全局組件 import dataV from '@jiaminghi/data-view' Vue.use(dataV)
哈哈，這篇和上一篇vue3一起寫的，用的同一個(gè)demo，不會(huì)vue3的看下我的上一篇文章，可以改成vue2使用：
（2）按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
3.使用
test1.vue文件中：（在下面的demo中我使用了邊框、飛線圖增強(qiáng)版、錐形柱圖、膠囊柱圖、輪播表、排名輪播表等，在實(shí)際開(kāi)發(fā)中看情況使用，以及布局均需根據(jù)實(shí)際開(kāi)發(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" 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ù)文件，在實(shí)際開(kāi)發(fā)中可以換成從后臺(tái)獲取的數(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: '南陽(yáng)',
value: 120
},
{
name: '西峽',
value: 78
},
{
name: '駐馬店',
value: 66
},
{
name: '新鄉(xiāng)',
value: 80
},
{
name: '信陽(yáng)',
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: '開(kāi)封',
coordinate: [0.59, 0.35]
},
{
name: '許昌',
coordinate: [0.53, 0.47]
},
{
name: '平頂山',
coordinate: [0.45, 0.54]
},
{
name: '洛陽(yáng)',
coordinate: [0.36, 0.38]
},
{
name: '周口',
coordinate: [0.62, 0.55]
},
{
name: '漯河',
coordinate: [0.56, 0.56]
},
{
name: '南陽(yáng)',
coordinate: [0.37, 0.66]
},
{
name: '信陽(yáng)',
coordinate: [0.55, 0.81]
},
{
name: '駐馬店',
coordinate: [0.55, 0.67]
},
{
name: '濟(jì)源',
coordinate: [0.37, 0.29]
},
{
name: '三門峽',
coordinate: [0.20, 0.36]
},
{
name: '商丘',
coordinate: [0.76, 0.41]
},
{
name: '鶴壁',
coordinate: [0.59, 0.18]
},
{
name: '濮陽(yáng)',
coordinate: [0.68, 0.17]
},
{
name: '安陽(yáng)',
coordinate: [0.59, 0.10]
}
],
lines: [
{
source: '新鄉(xiāng)',
target: '鄭州'
},
{
source: '焦作',
target: '鄭州'
},
{
source: '開(kāi)封',
target: '鄭州'
},
{
source: '許昌',
target: '鄭州'
},
{
source: '平頂山',
target: '鄭州'
},
{
source: '洛陽(yáng)',
target: '鄭州'
},
{
source: '周口',
target: '鄭州'
},
{
source: '漯河',
target: '鄭州'
},
{
source: '南陽(yáng)',
target: '鄭州'
},
{
source: '信陽(yáng)',
target: '鄭州'
},
{
source: '駐馬店',
target: '鄭州'
},
{
source: '濟(jì)源',
target: '鄭州'
},
{
source: '三門峽',
target: '鄭州'
},
{
source: '商丘',
target: '鄭州'
},
{
source: '鶴壁',
target: '鄭州'
},
{
source: '濮陽(yáng)',
target: '鄭州'
},
{
source: '安陽(yáng)',
target: '鄭州'
}
],
icon: {
show: true,
src: require('@/assets/mapPoint.png')
},
text: {
show: true,
},
bgImgSrc: require('@/assets/map.jpg')
}
const config6={
data: [
{
name: '周口',
value: 55
},
{
name: '南陽(yáng)',
value: 120
},
{
name: '西峽',
value: 71
},
{
name: '駐馬店',
value: 66
},
{
name: '新鄉(xiāng)',
value: 80
},
{
name: '信陽(yáng)',
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: '南陽(yáng)',
value: 167
},
{
name: '周口',
value: 67
},
{
name: '漯河',
value: 123
},
{
name: '鄭州',
value: 55
},
{
name: '西峽',
value: 98
},
],
unit: 'ml'
}
export { config1,config2,config3,config4,config5,config6,config7}
三、效果
具體布局可以繼續(xù)優(yōu)化，再添加各種 元素使頁(yè)面更豐滿，這里只是做一個(gè)demo。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2(三)實(shí)現(xiàn)子菜單展開(kāi)收縮，帶動(dòng)畫效果實(shí)現(xiàn)方法
這篇文章主要介紹了vue實(shí)現(xiàn)收縮展開(kāi)效果的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-draggable實(shí)現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實(shí)現(xiàn)拖拽表單的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)的功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的小伙伴可以參考一下2023-03-03
這篇文章主要介紹了vue Tab切換以及緩存頁(yè)面處理的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家介紹了Vue之過(guò)濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助2021-11-11
vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作
這篇文章主要介紹了vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3中echarts的tooltip組件不顯示問(wèn)題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue在手機(jī)中通過(guò)本機(jī)IP地址訪問(wèn)webApp的方法
這篇文章主要介紹了vue在手機(jī)中通過(guò)本機(jī)IP地址訪問(wèn)webApp的方法,需要的朋友可以參考下2018-08-08
vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實(shí)例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
本文主要介紹了VUE引入使用G2圖表的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08