首页 SEO培训正文

实现响应式比较常用的方式 Echarts大屏展示 (响应式的)

SEO培训 2025-02-08 19

本文目录导航：

Echarts大屏展示，实现响应式比较常用的方式
什么是响应式编程
响应式布局该怎么设计

Echarts大屏展示，实现响应式比较常用的方式

以前写过一些大屏可视化的实现方式，发现有点落后了，更新下。

实现响应式比较常用的方式 Echarts大屏展示 (响应式的)

能学到的知识

1、PC数据可视化项目，实现响应式一篇搞定

2、配合蓝湖使用，主要是取元素的样式、色值，完美还原

3、基于vue2、vuecli4、ECharts5

效果图浏览器默认状态1920xxxx768实现

主要思路就是，根据设计图的尺寸，用css的transform:scale缩放页面。

实现缩放主要代码changeScale(){constbody=1=/2=/=scale1<scale2?=`scale(${scale})translate(-50%,-50%)`}

translate，是为了让页面的缩放保持宽高比，要配合对应容器的css实现，例如本项目的：

{width:1920px;height:1080px;overflow:hidden;position:fixed;top:50%;left:50%;transform-origin:lefttop;}

上面的实现，其实不用translate也行的，但是页面的高度在某些屏幕下会被压扁，因为屏幕尺寸和设计图的宽高比不一致，有兴趣的自己尝试了

关于绑定数据

为了可读性，一般都把页面按模块分割成组件引入使用的。数据的绑定，一般2种情况：

1、大屏的数据一个接口全部返回

这种情况，给每个需要数据的组件设置props属性，然后在主页面请求数据，传参就行，具体看代码了，不复杂。

2、每个图表模块都单独一个接口返回数据

这种情况就在对应组件请求数据，绑定数据就行了

代码总览

涉及的文件如下（具体参考代码）：

|--src|--views|--bigscreen//实例所在||||--components||--leftView||||--rightView||||--centerView||||--bottomView||||--utils||--styles|//大屏共用样式代码

按代码总览的目录去代码里找着看就行了。

总结

大屏的布局，各种各样，自己看情况修改了，这里只是做个例子。

这里的方案，可以保证设定尺寸下的页面，以设定尺寸为基础缩放，达到响应式的效果。

现在做的项目，大多数都是以1920x1080的设计图来做，和蓝湖配合，基本可以很简单的就达到设计图90%+的效果，剩下的10%，主要是因为地图无法百分百的随意还原，其它部分都是可以完美实现的。

拓展

数据可视化，图表的实现，用的是Echarts，至今做了不少大屏项目，总结的一套用法，比较成熟和稳定了，Echarts的使用可参考以下

1、vue项目中封装echarts的比较优雅的方式

2、vue2项目中封装echarts地图比较优雅的方式

3、vue2项目中给echarts地图设置背景图和打点

原文：

什么是响应式编程

响应式编程是一种编程范式，它关注于对系统变化的响应。

响应式编程主要处理异步数据，特别是在处理大量数据或数据流时表现尤为出色。

与传统的阻塞式编程不同，响应式编程更加关注如何响应系统中的事件、消息或数据变化，它主张以数据流为核心构建系统。

当系统中的某个部分发生变化时，响应式编程模型能够自动触发相应的响应，使系统更加灵活和可扩展。

响应式编程特别适用于处理不确定性、异步性，以及在复杂数据流中进行数据处理和事件驱动的编程场景。

在现代应用程序开发中，尤其是在构建实时、动态交互的应用时，响应式编程已经成为一种重要的解决方案。

通过使用响应式编程模型，开发者可以更好地管理数据流和异步操作，确保系统在面对大量数据或复杂事件时依然保持高性能和稳定性。

为了实现响应式编程，开发者需要使用诸如观察者模式或数据流框架等核心概念和技术。

在这种模式下，当数据源发生变化时，所有相关的订阅者或观察者都会收到通知并作出相应的响应。

这种机制使得开发者能够更轻松地构建可扩展、灵活且响应迅速的系统。

随着技术的发展和应用的复杂性增加，响应式编程已成为许多领域开发的重要工具之一。

无论是在Web开发、移动应用还是物联网领域，响应式编程都在发挥着越来越重要的作用。

总的来说，响应式编程是一种关注系统变化并据此作出响应的编程范式。

它特别适用于处理异步数据和事件驱动的场景，有助于构建高性能、稳定和灵活的系统。

通过使用响应式编程模型和相关技术，开发者能够更有效地管理和处理数据流，从而为用户提供更好的体验。

响应式布局该怎么设计

三、响应式布局该怎么设计?那在我们的实际专案中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的相容性的困扰，现在还要来个不同尺寸装置，我们该怎么淡定下来呢?有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的介面。

接下来就一起来深入的了解Media Query。

当浏览器的解析度小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设定为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。

同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。

看看我们的例子：/* 当浏览器的可视区域小于980px */@media screen and (max-width: 980px) {#wrap {width: 90%; margin:0 auto;}#content {width: 60%;padding: 5%;}#sidebar {width: 30%;}#footer {padding: 8% 5%;margin-bottom: 10px;} }/* 当浏览器的可视区域小于650px */@media screen and (max-width: 650px) { #header {height: auto;}#searchform {position: absolute;: 5px;right: 0;}#content {width: auto; float: none; margin: 20px 0;}#sidebar {width: 100%; float: none; margin: 0;} }通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设定几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸装置来进行响应式的布局。

为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：/* 禁用iPhone中Safari的字号自动调整 */ { -webkit-text-size-adjust: none; }/* 设定HTML5元素为块 */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }/* 设定图片视讯等自适应调整 */img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } embed, object, iframe { width: 100%; height: auto; }最后要注意的是在页面的头部<head></head>之间加上下面这句∶<meta name=viewport content=width=device-width; initial-scale=1.0>meta viewport这个属性是在移动装置上设定原始大小显示和是否缩放的宣告。

引数设定∶width – viewport的宽度height – viewport的高度initial-scale – 初始的缩放比例minimum-scale – 允许使用者缩放到的最小比例maximum-scale – 允许使用者缩放到的最大比例user-scalable – 使用者是否可以手动缩放最后对于在IE浏览器中不支援media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用即可。

示例：

还是跟平常的设计一样。

只是会用@media 判断萤幕尺寸，多写几套样式而已。

directive返回物件里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~ directive的简单写法 (ngBlur, function($document)

响应式网站是用目前最新的网页制作技术5来做的，他可以根据使用者所用客户端来自动识别是pc端还是移动端，从而给出最合适的显示方式。

只要你会5，就可以做响应式布局。

如果不用5语言写，那就用普通的4来写，宽高用百分比来表示就行，赵一鸣随笔部落格就是用百分比来表示的，你可以搜寻开启网站看一下。

如果我的回答对你有用，可以采纳哦！