vue+Echarts 实时大屏看板

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

前言

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

 一、vue配置

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

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

1.  
   module.exports = {
2.  
   configureWebpack: {
3.  
   name: "", // 打包后的浏览器的title, 大屏全屏展示了用处不大
4.  
   resolve: {
5.  
   alias: {
6.  
   '@': resolve('src')
7.  
   }
8.  
   }
9.  
   },
10.  
    css: {
11.  
    // 全局公共css
12.  
    loaderOptions: {
13.  
    sass: {
14.  
    prependData: `@import "@/styles/index.scss";` // 这个是在每个css文件加个前置代码
15.  
    }
16.  
    }
17.  
    }
18.  
    }

二、适配方案  

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

1.  
   (function (win) {
2.  
   var bodyStyle = document.createElement('style')
3.  
   bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;overflow: hidden}`
4.  
   document.documentElement.firstElementChild.appendChild(bodyStyle)
5.  
    
6.  
   function refreshScale() {
7.  
   let docWidth = document.documentElement.clientWidth;
8.  
   let docHeight = document.documentElement.clientHeight;
9.  
   //设计图的宽高
10.  
    var designWidth = 1920,
11.  
    designHeight = 1080,
12.  
    widthRatio = docWidth / designWidth,
13.  
    heightRatio = docHeight / designHeight;
14.  
    //设置缩放属性
15.  
    document.body.style = "transform:scale(" widthRatio "," heightRatio ");transform-origin:left top;"
16.  
    // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
17.  
    setTimeout(function () {
18.  
    var lateWidth = document.documentElement.clientWidth,
19.  
    lateHeight = document.documentElement.clientHeight;
20.  
    if (lateWidth === docWidth) return;
21.  
     
22.  
    widthRatio = lateWidth / designWidth
23.  
    heightRatio = lateHeight / designHeight
24.  
    document.body.style = "transform:scale(" widthRatio "," heightRatio ");transform-origin:left top;"
25.  
    }, 0)
26.  
    }
27.  
    refreshScale()
28.  
     
29.  
    win.addEventListener("pageshow", function (e) {
30.  
    if (e.persisted) { // 浏览器后退的时候重新计算
31.  
    refreshScale()
32.  
    }
33.  
    }, false);
34.  
    //监听页面变化
35.  
    win.addEventListener("resize", refreshScale, false);
36.  
    })(window)

三、Echarts

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

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

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

1.  
   mounted() {
2.  
   window.addEventListener("resize", () => {
3.  
   this.update = new Date().getTime();
4.  
   });
5.  
   }

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

1.  
   watch: {
2.  
   upDate() {
3.  
   this.myEchart && this.myEchart.resize();
4.  
   }
5.  
   }

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

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

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

四、实时更新

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

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

总结

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

这篇好文章是转载于：学新通技术网