文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue Echarts实现实时大屏动态数据显示

2022-11-13 18:22

关注

前言

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

一、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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯