DataV介绍
DataV是一个基于Vue 的数据可视化组件库,主要用于构建大屏（全屏 ）数据展示页面即数据可视化，具有多种类型组件可供使用:
- 提供用于提升页面视觉效果的SVG边框和装饰
- 提供常用的图表如折线图等
- 飞线图/轮播表等其他组件
了解了DataV，接下来开始在项目中使用
1.安装DataV
- npm安装方式
kotlin
npm install @jiaminghi/data-view- yarn安装
sql
yarn add @jiaminghi/data-view2.在项目中引入
在main.js文件中挂载
js
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)3.在页面中使用
vue
<template>
<div class="app-container">
<dv-full-screen-container>
<dv-loading v-if="false">Loading...</dv-loading>
<dv-border-box-11 title="大数据平台">
<div class="container">
<div class="top flex" :style="{ height: height / 10 + 'px' }">
<div class="item">
<dv-border-box-7>
<p class="title">设备总数</p>
<dv-digital-flop :config="config5" style="width:100%;height:50px;" />
</dv-border-box-7>
</div>
<div class="item">
<dv-border-box-7>
<p class="title">正常运行总数</p>
<dv-digital-flop :config="config5" style="width:100%;height:50px;" />
</dv-border-box-7>
</div>
<div class="item">
<dv-border-box-7>
<p class="title">异常数量</p>
<dv-digital-flop :config="config5" style="width:100%;height:50px;" />
</dv-border-box-7>
</div>
<div class="item">
<dv-border-box-7>
<p class="title">维修次数</p>
<dv-digital-flop :config="config5" style="width:100%;height:50px;" />
</dv-border-box-7>
</div>
<div class="item">
<dv-border-box-7>
<p class="title">报警次数</p>
<dv-digital-flop :config="config5" style="width:100%;height:50px;" />
</dv-border-box-7>
</div>
</div>
<div class="main">
<div class="left">
<div class="item">
<dv-border-box-8 :style="{ height: height * 0.23 + 'px' ,padding:5+'px' }">
<dv-active-ring-chart :config="config3" style="width:98%;height:98%;" />
</dv-border-box-8>
</div>
<div class="item">
<dv-border-box-8 :reverse="true" :style="{ height: height * 0.23 + 'px',padding:5+'px' }">
<dv-capsule-chart :config="config3" style="width:98%;height:98%;" />
</dv-border-box-8>
</div>
<div class="item">
<dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:5+'px' }">
<dv-conical-column-chart :config="config3" style="width:98%;height:98%;" />
</dv-border-box-8>
</div>
</div>
<div class="middle">
<dv-border-box-8 :reverse="true" :style="{ height: height * 0.70 + 'px',}">
<div id="yzMap"></div>
</dv-border-box-8>
</div>
<div class="right">
<div class="item">
<dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:1+'%' }">
<div class="flexCenter" style="width: 98%;height:98%">
<span class="deviceTitle">设备维修完成情况</span>
<span class="deviceSub">累计完成 <span style="color: #3ADEC4;">189</span>
件</span>
<dv-percent-pond :config="config1" style="width:50%;height:50%;" />
</div>
</dv-border-box-8>
</div>
<div class="item">
<dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:1+'%' }">
<dv-scroll-board :config="config4" style="width:98%;height:98%;" />
</dv-border-box-8>
</div>
<div class="item">
<dv-border-box-8 :style="{ height: height * 0.23 + 'px',padding:1+'%'}">
<dv-scroll-ranking-board :config="config3" style="width:98%;height:98%;" />
</dv-border-box-8>
</div>
</div>
</div>
</div>
</dv-border-box-11>
</dv-full-screen-container>
</div>
</template>
<script>
export default {
name: "Screen",
data () {
return {
height: 0,
config3: {
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
}
],
},
config4: {
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'],
],
index: true,
columnWidth: [50],
align: ['center'],
carousel: 'page'
},
config5: {
number: [100],
content: '{nt}个'
},
config1: {
value: 45
},
mapMarker: null
}
},
mounted () {
this.setHeight()
window.addEventListener('resize', this.setHeight)
setTimeout(() => { this.roadMap() }, 100)
},
methods: {
// 获取计算高度
setHeight () {
this.height = window.innerHeight
},
roadMap () {
// vue项目需要先声明 T = window.T，不然后面无法获取到。
var T = window.T
this.wxMap = new T.Map('yzMap') // div的id
// 传参中心点经纬度，以及放大程度，最小1，最大18
this.wxMap.centerAndZoom(new T.LngLat(116.001930, 29.705057), 12)
},
}
};
</script>
<style scoped >
body {
/* 建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。
使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕 */
margin: 0;
}
.app-container {
width: 100%;
height: 100vh;
background: url(./img/bg.jpg);
background-size: 100% 100%;
}
.dv-border-box-11 {
position: absolute;
}
.container {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.top {
width: 100%;
margin-top: 60px;
}
.top .title {
font-size: 22px;
color: #fff;
text-align: center;
margin: 10px 0;
}
.top .item {
width: 20%;
margin: 0 10px;
}
.main {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.main .left {
width: 24%;
}
.main .item {
width: 100%;
box-sizing: border-box;
}
.middle {
width: 50%;
}
#map {
width: 100%;
height: 100%;
}
.main .right {
width: 24%;
}
.return,
.screen {
cursor: pointer;
}
.flexCenter {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.deviceTitle {
color: #fff;
font-size: 18px;
letter-spacing: 5px;
}
.deviceSub {
color: #cbcbcb;
font-size: 16px;
}
#yzMap {
width: 100%;
height: 100%;
position: absolute;
z-index: 9999;
}
::v-deep .tdt-control-container {
display: none !important;
}
</style>4.最后的效果
地图使用的天地图，具体使用在我之前写的 # Vue2中使用天地图 