此文为本人大屏项目上线后的经验总结

前言

因为是国企线上应用的活动大屏，我就不附图了。代码仅供参考。

一、vue配置

1. 我是用vue-cli 搭建的，大屏项目复杂度不高，vue-router、vuex 、axios、sass 等都可以不用，vue、echarts就够用。

2. vue.config.js 配置就正常配，出口入口等基本配置我就不展示了，这两个配置项大屏还有点用。主要是我把每个图表都拆成了单独的组件，没封装公共的图表组件，一些重复的样式还有一些scss的函数可以写在公共的文件里，我是开发环境用了sass。

module.exports = {configureWebpack: {name: "", // 打包后的浏览器的title, 大屏全屏展示了用处不大 resolve: {alias: {'@': resolve('src')}}},css: {// 全局公共cssloaderOptions: {sass: {prependData: `@import "@/styles/index.scss";` // 这个是在每个css文件加个前置代码}}}
}

二、适配方案

既然是大屏，肯定是要适配滴。适配方案网上很多很多，我不过多介绍，我只说下我真正使用的方案。以下代码放到一个js文件里，然后在main.js里引入，自执行函数直接解决这个适配问题，js的好处就是不限于你所使用的js框架。适配过后单位可采用px和百分比。flex布局简单将大屏分割一个图表为一个组件，拼出来就好了。

(function (win) {var bodyStyle = document.createElement('style')bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;overflow: hidden}`document.documentElement.firstElementChild.appendChild(bodyStyle)function refreshScale() {let docWidth = document.documentElement.clientWidth;let docHeight = document.documentElement.clientHeight;//设计图的宽高var designWidth = 1920,designHeight = 1080,widthRatio = docWidth / designWidth,heightRatio = docHeight / designHeight;//设置缩放属性document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function () {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeight;if (lateWidth === docWidth) return;widthRatio = lateWidth / designWidthheightRatio = lateHeight / designHeightdocument.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"}, 0)}refreshScale()win.addEventListener("pageshow", function (e) {if (e.persisted) { // 浏览器后退的时候重新计算refreshScale()}}, false);//监听页面变化win.addEventListener("resize", refreshScale, false);
})(window)

三、Echarts

1. echarts 官网对于api 和 option 的解释很清晰全面，看官网解决大部分问题。

2. 图表option 可能存在大量重复配置项，比如整个大屏风格颜色，可以把公共的抽离成一个js对象，然后利用对象合并，既保证了代码简洁，后面修改和维护也方便。

3.图表适配问题，图表适配保证视口变化，图表不会变得扭曲。在根组件App.vue监听一下。update 通过 prop分发给每个图表组件。时间戳保证更新状态。

mounted() {window.addEventListener("resize", () => {this.update = new Date().getTime();});
}

图表所在组件监听一下变化，调用echarts内置函数resize。

 watch: {upDate() {this.myEchart && this.myEchart.resize();}}

4. echarts 地图问题，地图的话echarts5.0.0以后的版本往后应该是不内置了，我下载了4.9.0版本的。最开始我下载的也是最新的，发现这个问题，我就降版本了。

import * as echarts from "echarts";
import "echarts/map/js/china.js";

这样就可以配置地图了，比较新的版本，不降版本也行，你网上找一份这个地图js文件，放到项目里也可以。

四、实时更新

实时更新怎么做，就是轮询。将请求过来的数据在App.vue 组件利用prop分发给每个图表组件。watch监听一下（deep），重新 init 图表。记得销毁定时器。

wheel() {this.timer = setInterval(() => {console.log("轮询调用接口中...");this.queryData();}, 60000); // 6秒一次
},
queryData() {// 请求接口 没用axios就用fetch
},

总结

基本就这些。如有问题欢迎评论或私信。

vue+Echarts 实时大屏看板相关推荐

Vue+Echarts监控大屏实例十五：智慧物流监控模板实例下
接上一篇:Vue+Echarts监控大屏实例十四:智慧物流监控模板实例上源码下载地址: Vue+Echarts监控大屏实例十二:智慧物流监控模板实例下载 4.8 员工监控界面展示数量分布. ...
Vue+Echarts监控大屏实例二：促销活动监控模板实例
一.实例概述本实例实现促销活动销售状态可视化大屏监控界面,包括综合监控.库存监控.浏览量监控.销售额监控.物流监控.咨询售后监控等.本实例实现对于监控界面的相关开发资料,提供实例源码.开发过程视 ...
Vue+Echarts监控大屏实例五：呼叫中心监控模板实例
一.实例概述 1.1 实例说明本实例实现话务呼叫中心可视化大屏监控界面前端,包括综合监控.状态监控.通话监控.质量监控等.本实例实现对于监控界面的相关开发资料,提供实例源码.开发过程视频及实现过 ...
vue+echarts制作大屏利用css3 scale 进行屏幕自适应
制作大屏设计图如果是16:9的ui图并且大屏显示符合16:9 可采用css3的scale进行动态缩放达到高清还原设计图前端实现就可以按照UI图px写代码了 1.resetScreenScale. ...
Vue+Echarts监控大屏实例六：智慧养老监控模板实例上
文章目录一.实例概述 1.1 实例说明 1.2 参考文档 1.3 开发视频二.效果预览 2.1. 系统导航界面 2.2. 综合监控界面 2.3. 告警监控界面 2.4. 健康监控界面 2.4. 环 ...
JS+Echarts制作实时大屏
最近工作中让完成一个实时大屏的东西,就是类似于电商实时数据成交数据的那种大屏,调研了一下,大致有两种方案可以实现,一.使用别人已开发的集成化方案,例如阿里的DataV:二.使用JS+Echarts.但 ...
【15】数据可视化：基于 Echarts + Vue 实现的大屏范例 - 世界人口统计大屏
系列文章 https://blog.csdn.net/lildkdkdkjf/article/details/120705616 文末有免费福利,喜欢的小伙伴们一键三连支持下,关注收藏点赞~ 目录 ...
Python大屏看板最全教程之Pyecharts图表
阅读本文大约需要3分钟主要内容:数据分析. 适用人群:Python初学者,数据分析师,或有志从事数据分析工作的人员. 准备软件:Anaconda(Spyder:代码编译).Navicat Premi ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...

vue+Echarts 实时大屏看板

前言

三、Echarts

四、实时更新

总结

vue+Echarts 实时大屏看板相关推荐

最新文章

热门文章