echarts 大屏适配

两篇文章：

大屏适配解决方案 - 掘金

更新！移动端最佳适配解决方案出炉

第一个项目：vw,vh 适配

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">在项目的 index.html 添加。npm i postcss-px-to-viewport安装 postcss-px-to-viewport 库，把 px 转 vw/vh// postcss.config.jsmodule.exports = {plugins: {'postcss-px-to-viewport': {unitToConvert: "px", // 要转化的单位       viewportWidth: 375, // UI设计稿的宽度       unitPrecision: 6, // 转换后的精度，即小数点位数       propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换     viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw       fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw      selectorBlackList：["wrap"], // 指定不转换为视窗单位的类名，       minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换       mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false      replace: true, // 是否转换后直接更换属性值       exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配       }}
}

vw、vh适配页面总有莫名的不适感。

第二个项目：css3的缩放transform: scale(X)属性

// 封装组件作为外层的壳
<template><divclass="ScreenAdapter":style="style"><slot /></div>
</template>
<script>
export default {name: '',//参数注入props: {width: {type: String,default: '1920' },height: {type: String,default: '1080' }},data() {return {style: {width: this.width + 'px',height: this.height + 'px',transform: 'scale(1) translate(-50%, -50%)'}}},mounted() {this.setScale()window.onresize = this.Debounce(this.setScale, 1000)},methods: {Debounce: (fn, t) => {const delay = t || 500let timerreturn function() {const args = argumentsif (timer) {clearTimeout(timer)}const context = thistimer = setTimeout(() => {timer = nullfn.apply(context, args)}, delay)}},// 获取放大缩小比例getScale() {const w = window.innerWidth / this.widthconst h = window.innerHeight / this.heightreturn w < h ? w : h},// 设置比例setScale() {this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'console.log('任你千变万化,我都不会影响性能')}}
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {transform-origin: 0 0;position: absolute;left: 50%;top: 50%;transition: 0.3s;background: red;
}
</style>

这个项目刚开始，实际效果还没试验，做的 demo 感觉还不错。

实际效果中遇到 canvas 缩放会模糊，解决方案是 svg 渲染和设置 devicePixelRatio (设备像素比)

Vue+ECharts 爬坑回忆录@渲染器用Canvas还是SVG - 掘金

前人栽树，后人乘凉。

echarts 大屏适配相关推荐

Three.js + React + Echart(折线图光线流动效果，柱状图数据动态更新动画) + Svga-Web应用之数据大屏(适配1920*1080 2560*1440 3840*2160)
Web应用之数据大屏一.技术栈 React 17.0.0 搭建脚手架 Eahcrt常规图表 Svga动画 3D模型-Three.Js 大屏适配-目标大屏(4K -3840*2160) 二.React ...
Vue 前端数据大屏适配
逻辑分析: 采用了css3的缩放transform: scale(X)属性,我们不难发现本人改变分辨率时,scale的值是变化的.前端小伙们们看到这,想必也已经明白了大概. 我们只要监听浏览器窗口大的 ...
爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
前言近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况,大部分原因还是适配问题. 我们做数据大屏时,因为显示器尺寸不同,会导致展示的时候有留白区域,效果不好,所 ...
ECharts大屏可视化
文章目录 ECharts大屏可视化一.项目概述 1.1 项目介绍 1.2 项目架构 1.3 使用环境二.数据获取 1.获取腾讯数据 1.1数据爬取 1.2数据存储
记公司项目中数字大屏适配4K大屏的问题
记公司项目中数字大屏适配4K大屏的问题在接手的时候,前端页面已经开发完成,div高度与宽度是百分比,所以适配问题不用考虑宽高问题,但字体边距等没有统一单位,要求适配4k屏首先4k屏的宽高是3840 ...
前端大屏适配几种方案
记录一下前端大屏的几种适配方案. 我们是1920*1080的设计稿. 文章目录一.方案一:rem+font-size 1.查看适配情况 1.1 1920*1080情况下 1.2 3840*2160( ...
Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
Echarts+大屏
先放上我做的大屏吧,做的不是很好看,希望大家能见谅. 一.实验目的理解大数据可视化的原理和方法掌握ECharts可视化的原理.步骤和效果掌握使用D3读取数据的方法二.实验任务与要求通过网店运 ...
高德地图+echarts 大屏项目
高德地图+echarts 大屏项目概述初始化地图创建马拉松路线概述如有不明白的可以加QQ:2781128388 源码获取:https://mbd.pub/o/bread/Y5uck5dp 开 ...

echarts 大屏适配

echarts 大屏适配相关推荐

最新文章

热门文章