Vue Echarts实现实时大屏动态数据显示
作者:深情的狼 发布时间:2024-04-27 15:52:02
前言
因为是国企线上应用的活动大屏,我就不附图了。代码仅供参考。
一、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: {
// 全局公共css
loaderOptions: {
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 / designWidth
heightRatio = lateHeight / designHeight
document.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
},
来源:https://blog.csdn.net/xu_yi_hang/article/details/127207269
猜你喜欢
- 导语每年的节假日一到,大家头疼的总时同一个问题:你买到回家的票了吗?尤其是大型的节日:”比如国庆、春节......&am
- 1、通过将函数存储在独立的文件中,可隐藏程序代码的细节,将重点放在程序的高层逻辑上。2、能让你在众多不同的程序中重用函数。将函数存储在独立文
- “ 使用python实现协议中常见的TCP长连接框架。”分析多了协议就会发现,很多的应用,
- 前言只有你想不到,没有我找不到写不了的好游戏!哈喽。我是你们的栗子同学啦~今天小编去了我朋友家里玩儿,看到了一个敲可爱的小狗狗,是我朋友养的
- ccs的优点:css相对xpath语法比xpath简洁,定位速度比xpath快css的缺点:css不支持用逻辑运算符来定位,而xpath支持
- argparse库是python下的一个命令行参数管理库,支持int、str、float、bool、数组等5种基本数据类型。在解析命令行参数
- 前一段时间就安装了AspJpeg 2.0,一直没有时间去测试,直到昨天晚上因为服务器无法访问才在本机测试下,特分享下测试结果,只针对GIF图
- 这是Pygame zero 最全集合安装Windows系统:按下win+r,输入pip install pyzeropip install
- PyAutoGUI 不知道你有没有用过,它是一款用Python自动化控制键盘、鼠标的库。但凡是你不想手动重复操作的工作都可以用这个库来解决。
- 本文实例讲述了python实现TCP服务器端与客户端的方法。分享给大家供大家参考。具体如下:TCP服务器程序(tsTserv.py):fro
- 用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个。&nbs
- 很早以前就说过,IE8的标准模式已经不再支持滤镜了,不过IE仍然留了一条后路,你可以在CSS中这样写滤镜:-ms-filter
- 具体如何屏蔽更多的快捷键可以自行google搜索。 这里要说的是如何屏蔽后去执行自定义的事件。这里为了方便使用的Kibo做例子,使用goog
- 问题描述分析这是因为本地delve组件版本过低导致的,2019.2.1版本的Goland默认支持go 1.13查看F:\Go (GOPATH
- 本文实例讲述了PHP解析xml格式数据工具类。分享给大家供大家参考,具体如下:class ome_xml { /**  
- 这两天在搞Theano,要把mat文件转成pickle格式载入Python。Matlab是把一维数组当做n*1的矩阵的,但Numpy里还是有
- 听歌识曲,顾名思义,用设备“听”歌曲,然后它要告诉你这是首什么歌。而且十之八九它还得把这首歌给你播放出来。这样的功能在QQ音乐等应用上早就出
- 1.1.1 摘要在开发过程中,我们不时会遇到系统性能瓶颈问题,而引起这一问题原因可以很多,有可能是代码不够高效、有可能是硬件或网络问题,也有
- 这个问题困扰了我很长很长的时间,在跨域获取数据的时候就要用到服务器端的对象,以前一直用的是Msxml.XMLHTTP。但是问题太多了,特别严
- 列表转化为字符串如下所示:>>> list1=['ak','uk',4]>>&