Vue Echarts实现实时大屏动态数据显示
前言
因为是国企线上应用的活动大屏，我就不附图了。代码仅供参考。
一、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
},到此这篇关于Vue Echarts实现实时大屏动态数据显示的文章就介绍到这了,更多相关Vue Echarts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了深入探索VueJS Scoped CSS 实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
项目中有一个需求,需要实现直播功能,后端接口返回的是m3u8数据流,下面这篇文章主要给大家介绍了关于Vue如何接入hls/m3u8直播视频的相关资料,需要的朋友可以参考下2022-07-07
vue3.0 router路由跳转传参问题(router.push)
这篇文章主要介绍了vue3.0 router路由跳转传参问题(router.push)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤，既然是部署到服务器，肯定是需要一个云的。具体思路步骤大家可以参考下本文2017-07-07
解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected&n
这篇文章介绍了解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了Vant picker选择器设置默认值导致选择器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue 中的动态传参和query传参操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue实现图片按比例缩放问题操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论