zoom() {
this.scaleX = document.body.clientWidth / 1920;
this.scaleY = document.body.clientHeight / 1080;
computed: {
style() {
return `transform:scale(${this.scaleX},${this.scaleY});transform-origin:top left;width:1920px;height:1080px;`;
根元素配置如下:
<div id="app" :style="style">
<router-view />
亲测有效,可能有些弹框位置会受到影响,最好是项目刚开始做的时候进行配置,不要中期才配置
最近在用VUE写大屏页面,遇到屏幕自适应问题,根据设计的尺寸,在各种屏幕尺寸下自适应,经过几天摸索,终于达到了效果,希望为还在这问题困扰的提供点帮助
1. 在配置文件设置大屏设计的尺寸1920*1080
//appConfig.js
export default{
screen:{
width:1920,
height:1080
}//大屏设计...
自己也使用Vue挺长时间了,之前一直做可视化相关的领域,但也不全是,考虑到如果有一些可视化模板示例可能会更好一些,所以就做了一些可视化相关的内容,从搭建框架,查找资料,到有了现在的一个模板基本机构。
一、什么是可视化
其实文字不用过多的描述,其实网上有很多示例,比如百度的可视化,有很多参考的示例,通过大屏的方式能够直观体现数据及其变化趋势。
一、从网上找一个喜欢的图
1.首先
大屏要先解决屏幕适配的问题:这里用viewport的方案,使用postcss-px-to-viewport插件,在
vue项目里新建postcss.config.js配置一下postcss-px-to-viewport:
module.exports = {
plugins: {
// ...
'postcss-px-to-viewport': {
viewportWidth: 1920,
vue项目实现大屏展示 自适应问题
此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应。
首先下载lodash插件。
npm i lodash -S
<template>
<div class="scree-container">
<div class="screen-box" :style="'transform:scale('+scaleValue+') translate(-50%,-50
web 大数据可视化 使用的是echarts图表库,ECharts , DataV数据可视化, 大屏可视化, 大屏适配,
提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于
BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
DataV数据可视化旨让更多的人看到数据可视化的魅力,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监.