dataV大屏在vue使用
周小盗 人气:0前言
随着信息化的发展，大屏展示的需求越来越多，使用e-charts一个一个的做配置太麻烦，于是找到了封装好的dataV，直接拿来用就可以实现酷炫的大屏效果。
（画外音：部门接了几个搞大屏的项目，技术总监让研究一下大屏项目通用性，然后我研究了一下dataV）附上官方API链接
一、dataV可以实现什么效果？
答：各种图表大屏效果。（以下图是从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中我使用了边框、飞线图增强版、锥形柱图、胶囊柱图、轮播表、排名轮播表等，在实际开发中看情况使用，以及布局均需根据实际开发情况调整）
<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文件中：(静态数据文件，在实际开发中可以换成从后台获取的数据；注意图片的引用)
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: '新乡',
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: '新乡',
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: '新乡',
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: '新乡',
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}
三、效果
具体布局可以继续优化，再添加各种 元素使页面更丰满，这里只是做一个demo。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
加载全部内容