Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
2b543f59
You need to sign in or sign up before continuing.
Commit
2b543f59
authored
Sep 27, 2023
by
liyan
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
ssh://192.168.1.113:10022/yifu-study/front/yifu-study-front-share
parents
850e582b
4e9ce2ee
Pipeline
#18690
failed with stage
Changes
3
Pipelines
1
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
115 additions
and
0 deletions
+115
-0
前端实现自适应屏幕数据可视化大屏(vue + v-scale-screen组件 + dataV组件).md
...sts/前端实现自适应屏幕数据可视化大屏(vue + v-scale-screen组件 + dataV组件).md
+115
-0
单位px,em,rem,rpx详解,以及适配.html
source/_posts/单位px,em,rem,rpx详解,以及适配.html
+0
-0
单位px,em,rem,rpx详解,以及适配.zip
source/_posts/单位px,em,rem,rpx详解,以及适配.zip
+0
-0
No files found.
source/_posts/前端实现自适应屏幕数据可视化大屏(vue + v-scale-screen组件 + dataV组件).md
0 → 100644
View file @
2b543f59
***前言**
*
目前市面上有很多付费的数据可视化平台,作为一个代码编程人员,为啥不自己搞一套呢,不仅自己可以增加自己的技能,也可以减少开发成本,何乐而不为呢?
写这篇文章,一方面工作有需求要实现数据可视化大屏,另一方面当然现在也有很多场景都用到数据可视化大屏,如报告总结、数据跟踪等等,在此总结分享给大家,写的不好的地方欢迎指出批评,谢谢。
## 什么是数据可视化的大屏
众所周知, 未来的数据可视化趋势已成为了必然性,越来越多的企业、政府等的应用场景应用都会普及 ,销售、教育、医疗、贸易等行业领域也涉及广泛 ,根据实时的监控数据,把最新的数据展现在大屏幕上,清楚地看到自己想要看到的数据,同时根据这些数据做出决策的调整。
数据可视化是指通过图表、图形、地图等视觉要素来表现数据中包含的信息的倾向、异常和模式。简而言之,数据可视化是用图形表达数据和信息。
## 数据可视化大屏幕的优点
1、全面认识数据,是数据更直观清晰
2、支持自由布局
3、低代码开发,轻松搭建
在这我用了vue + v-scale-screen组件 + dataV组件来开发这个功能,也可以用react + r-scale-screen + dataV组件来实现,v-scale-screen和r-scale-screen是大屏自适应容器组件,分别基于VUE框架的和react框架的,如果没有那么多复杂的场景可不考虑使用此组件。
**v-scale-screen**
:
大屏自适应容器组件,可用于大屏项目开发,实现屏幕自适应,可根据宽度自适应,高度自适应,和宽高等比例自适应,全屏自适应(会存在拉伸问题),使用时候请根据VUE的版本安装对应的版本,详请阅读
[
v-scale-screen文档
](
https://github.com/Alfred-Skyblue/v-scale-screen
)
。
**dataV**
:
大屏可视化组件,具有多种类型的组件可供使用。推荐使用谷歌浏览器,其他浏览器有兼容问题。
使用时注意宽高异常和状态更新的问题。详情请阅读
[
dataV文档
](
http://datav.jiaminghi.com/
)
。
*宽高异常*
组件的默认宽高都是100%,可以根据父容器宽高进行自适应,但在某些情况下组件宽高可能表现异常,这种情况一般是因为组件的父容器宽高发生了变化,而组件没有侦知这一变化,你可以在组件上绑定key值,在更改父容器宽高且页面完成重绘后(使用$nextTick),更新key值,使组件强制刷新,以获取正确宽高。
*状态更新*
避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里
组件props均未设置deep监听,刷新props时,请直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps = { ...this.someProps })。
首先你得有一个VUE的环境,这里就不过多介绍和安装VUE环境了,直接跳过这一步,然后安装v-scale-screen大屏自适应容器组件。
```
typescript
npm
install
v
-
scale
-
screen
或
yarn
add
v
-
scale
-
screen
```
在 vue2 中我们使用插件方式导出,故而需要 Vue.use() 进行注册
```
typescript
// main.js
import
Vue
from
'vue'
import
VScaleScreen
from
'v-scale-screen'
Vue
.
use
(
VScaleScreen
)
```
```
typescript
<
template
>
<
v
-
scale
-
screen
width
=
"1920"
height
=
"1080"
>
<
div
>
你想添加的模块
<
/div
>
<
/v-scale-screen
>
<
/template
>
```
Vue3 or Vue2.7 版本
```
typescript
<
template
>
<
v
-
scale
-
screen
width
=
"1920"
height
=
"1080"
>
<
div
>
你想添加的模块
<
/div
>
<
/v-scale-screen
>
<
/template
>
<
script
>
import
{
defineComponent
}
from
'vue'
import
VScaleScreen
from
'v-scale-screen'
export
default
defineComponent
({
name
:
'Demo'
,
components
:
{
VScaleScreen
}
})
<
/script
>
```
**注:使用时请将 body 样式设置为 overflow: hidden; 注:使用时请将 body 样式设置为 overflow: hidden; 注:使用时请将 body 样式设置为 overflow: hidden;这里的width和height分别是大屏的宽度和高度**
然后我们安装一下dataV组件
```
typescript
npm
install
@
jiaminghi
/data-view 或 yarn add @jiaminghi/
data
-
view
```
使用
```
typescript
// 将自动注册所有组件为全局组件
import
dataV
from
'@jiaminghi/data-view'
Vue
.
use
(
dataV
)
```
按需引入
```
typescript
import
{
borderBox1
}
from
'@jiaminghi/data-view'
Vue
.
use
(
borderBox1
)
```
***有的朋友就会问了,为啥安装了dataV组件还要安装v-scale-screen组件呢?dataV不也可以全屏展示自动进行缩放处理吗。这里要解释一波,一个原因是v-scale-screen的自适应的效果比较好,还有就是dataV的局限性。dataV建议在全屏容器内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0,否则会引起计算误差,全屏后不能完全充满屏幕。但是用vue + v-scale-screen包裹一下就不会出现这种问题。这里不推荐使用dataV的全屏容器**
*
总体的代码片段
```
typescript
<
v
-
scale
-
screen
width
=
"1920"
height
=
"1080"
>
<
div
>
<
dv
-
border
-
box
-
1
:
color
=
"['red', 'green']"
backgroundColor
=
"blue"
>
dv
-
border
-
box
-
1
<
/dv-border-box-1
>
<
dv
-
decoration
-
1
:
color
=
"['red', 'green']"
/>
你想添加的
dataV
展示组件。。。
<
/div
>
<
/v-scale-screen
>
```
source/_posts/单位px,em,rem,rpx详解,以及适配.html
0 → 100644
View file @
2b543f59
This diff is collapsed.
Click to expand it.
source/_posts/单位px,em,rem,rpx详解,以及适配.zip
0 → 100644
View file @
2b543f59
File added
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment