数据大屏vue,vue data里面用data的数据
这篇文章主要介绍了数据电视大屏在某视频剪辑软件中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
前言一、数据电视可以实现什么效果？二、使用步骤1.安装依赖2.引入3.使用三、效果
前言
随着信息化的发展，大屏展示的需求越来越多，使用电子图表一个一个的做配置太麻烦，于是找到了封装好的dataV，直接拿来用就可以实现酷炫的大屏效果。
（画外音：部门接了几个搞大屏的项目，技术总监让研究一下大屏项目通用性，然后我研究了一下数据电视)附上官方应用程序接口链接
一、dataV可以实现什么效果？
答：各种图表大屏效果。(以下图是从数据电视可视化官网截出来的，此文章不讲数据电视可视化——拖拽图层类似PS，官网有教程，不需要编码基础，需要钱)
二、使用步骤
1.安装依赖
新公共管理安装@jiaminghi/data-view
2.引入
（1）全局引入
在主页。射流研究…中：
//将自动注册所有组件为全局组件
从" @jiaminghi/data-view "导入数据电视
Vue.use(数据电视)
哈哈，这篇和上一篇vue3一起写的，用的同一个演示，不会vue3的看下我的上一篇文章，可以改成vue2使用：
（2）按需引入
从" @jiaminghi/data-view "导入{ borderBox1 }
Vue.use(边框1)
3.使用
test1.vue文件中：(在下面的演示中我使用了边框、飞线图增强版、锥形柱图、胶囊柱图、轮播表、排名轮播表等，在实际开发中看情况使用，以及布局均需根据实际开发情况调整)
模板
dv-全屏-容器class=container
div class=左框
dv-border-box-1 class= border-box
dv-capsule-chart:config= config 7 class= charts style= height:300 px /
/dv-border-box-1
dv-border-box-8 class= border-box
dv-scroll-board:config= config 2 class= charts style= height:380 px /
/dv-border-box-8
dv-border-box-1 class= border-box
dv-scroll-ranking-board:config= config 3 class= charts style= height:300 px /
/dv-border-box-1
/div
div class=框中心
dv-border-box-1 class= border-box
dv-fly折线图-增强版：config= config 5 :dev= true class= charts style= height:800 px /
/dv-border-box-1
/div
div class=框右
dv-border-box-1 class= border-box
dv-scroll-ranking-board:config= config 3 class= charts style= height:300 px /
/dv-border-box-1
dv-border-box-8:reverse= true class= border-box
dv-圆锥柱形图：config= config 6 class= charts style= height:350 px；/
/dv-border-box-8
dv-border-box-1 class= border-box
dv-capsule-chart:config= config 7 class= charts style= height:300 px /
/dv-border-box-1
/div
/dv-全屏-容器
/模板
脚本
从导入{配置1,配置2,配置3,配置4,配置5,配置6,配置7}。/config.js
导出默认值{
名称："测试1",
数据：函数(){
返回{
配置1,
配置2,
配置3,
配置4,
配置5,
配置6,
配置七
}
},
}
/脚本
样式范围。容器{
显示器：flex
弯曲方向：行；
背景色：# 01132C
}。左，右{
宽度：25%;
}。居中{
宽度：50%;
}。方框{
显示器：flex
伸缩方向：列；
}。图表{
宽度：90%;
保证金：5%;
}
/风格
config.js文件中：(静态数据文件，在实际开发中可以换成从后台获取的数据；注意图片的引用)
const config1={}
常量配置2={
标题：[列1, 列2, 列3],
数据：[
[行一列1, 行一列2, 行一列3],
[行2列1, 行2列2, 行2列3],
[行3列1, 行3列2, 行3列3],
[行四列1, 行四列2, 行四列3],
[行5列1, 行5列2, 行5列3],
[行6列1, 行6列2, 行6列3],
[行七列1, 行七列2, 行七列3],
[行8列1, 行8列2, 行8列3],
[行9列1, 行9列2, 行9列3],
[行10列1, 行10列2, 行10列3]
],
指数：真的，
列宽：[50],
对齐：[居中],
旋转木马："页面"
}
常量配置3={
数据：[
{
名称： 周口，
价值：55英镑
},
{
名称： 南阳，
价值：120
},
{
名称： 西峡，
价值：78
},
{
名称： 驻马店，
数值：66
},
{
名称： 新乡，
价值：80
},
{
名称： 信阳，
价值：45英镑
},
{
名称： 漯河，
价值：29
}
]
}
const config4={}
常量配置5={
点数：[
{
名称： 郑州，
坐标：[0.48,0.35],
图标：{
src:require( @/assets/map中心点。png’)，
宽度：30,
身高：30
},
文本：{
颜色： #fb7293
}
},
{
名称： 新乡，
坐标：[0.52,0.23]
},
{
名称： 焦作，
坐标：[0.43,0.29]
},
{
名称： 开封，
坐标：[0.59,0.35]
},
{
名称： 许昌，
坐标：[0.53,0.47]
},
{
名称： 平顶山，
坐标：[0.45,0.54]
},
{
名称： 洛阳，
坐标：[0.36,0.38]
},
{
名称： 周口，
坐标：[0.62,0.55]
},
{
名称： 漯河，
坐标：[0.56,0.56]
},
{
名称： 南阳，
坐标：[0.37,0.66]
},
{
名称： 信阳，
坐标：[0.55,0.81]
},
{
名称： 驻马店，
坐标：[0.55,0.67]
},
{
名称： 济源，
坐标：[0.37,0.29]
},
{
名称： 三门峡，
坐标：[0.20,0.36]
},
{
名称： 商丘，
坐标：[0.76,0.41]
},
{
名称： 鹤壁，
坐标：[0.59,0.18]
},
{
名称： 濮阳，
坐标：[0.68,0.17]
},
{
名称： 安阳，
坐标：[0.59,0.10]
}
],
行：[
{
来源： 新乡，
目标： 郑州
},
{
来源： 焦作，
目标： 郑州
},
{
来源： 开封，
目标： 郑州
},
{
来源： 许昌，
目标： 郑州
},
{
来源： 平顶山，
目标： 郑州
},
{
来源： 洛阳，
目标： 郑州
},
{
来源： 周口，
目标： 郑州
},
{
来源： 漯河，
目标： 郑州
},
{
来源： 南阳，
目标： 郑州
},
{
来源： 信阳，
目标： 郑州
},
{
来源： 驻马店，
目标： 郑州
},
{
来源： 济源，
目标： 郑州
},
{
来源： 三门峡，
目标： 郑州
},
{
来源： 商丘，
目标： 郑州
},
{
来源： 鹤壁，
目标： 郑州
},
{
来源： 濮阳，
目标： 郑州
},
{
来源： 安阳，
目标： 郑州
}
],
图标：{
秀：真的，
src:require( @/assets/mappoint。png’)
},
文本：{
秀：真的，
},
bgImgSrc:require( @/assets/map。jpg’)
}
常量配置6={
数据：[
{
名称： 周口，
价值：55英镑
},
{
名称： 南阳，
价值：120
},
{
名称： 西峡，
价值：71
},
{
名称： 驻马店，
数值：66
},
{
名称： 新乡，
价值：80
},
{
名称： 信阳，
价值：35
},
{
名称： 漯河，
价值：15
}
],
img: [
需要( @/assets/mapPoint.png )，
需要( @/assets/mapPoint.png )，
需要( @/assets/mapPoint.png )，
需要( @/assets/mapPoint.png )，
需要( @/assets/mapPoint.png )，
需要( @/assets/mapPoint.png )，
需要( @/assets/mapPoint.png )
],
显示值：真
}
常量配置7={
数据：[
{
名称： 南阳，
价值：167
},
{
名称：周口，
价值：67
},
{
名称：漯河，
价值：123
},
{
名称：郑州，
价值：55英镑
},
{
名称：西夏，
价值：98
},
],
单位：“毫升”
}
导出{配置1、配置2、配置3、配置4、配置5、配置6、配置7}
三、效果
具体布局可以继续优化，然后添加各种元素，让页面更加饱满。这里只是一个演示。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。