快捷導(dǎo)航

Vue?Echarts實現(xiàn)實時大屏動態(tài)數(shù)據(jù)顯示

更新時間：2022年10月14日 08:35:16 作者：深情的狼

同大多數(shù)的前端框架一樣，先讀官網(wǎng)的使用方法。學(xué)會基本使用后，在實例中找到自己想要demo。拿過來改一改，一個echarts圖表就形成，畢竟人家做就是為了方便使用，這篇文章主要介紹了Vue?Echarts實現(xiàn)實時大屏動態(tài)數(shù)據(jù)顯示

前言

因為是國企線上應(yīng)用的活動大屏，我就不附圖了。代碼僅供參考。

一、vue配置

1. 我是用vue-cli 搭建的，大屏項目復(fù)雜度不高，vue-router、vuex 、axios、sass 等都可以不用，vue、echarts就夠用。

2. vue.config.js 配置就正常配，出口入口等基本配置我就不展示了，這兩個配置項大屏還有點用。主要是我把每個圖表都拆成了單獨的組件，沒封裝公共的圖表組件，一些重復(fù)的樣式還有一些scss的函數(shù)可以寫在公共的文件里，我是開發(fā)環(huán)境用了sass。

module.exports = {
  configureWebpack: {
  name: "", // 打包后的瀏覽器的title, 大屏全屏展示了用處不大 
  resolve: {
    alias: {
     '@': resolve('src')
    }
   }
  },
  css: {
    // 全局公共css
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/index.scss";` // 這個是在每個css文件加個前置代碼
      }
    }
  }
}

二、適配方案

既然是大屏，肯定是要適配滴。適配方案網(wǎng)上很多很多，我不過多介紹，我只說下我真正使用的方案。以下代碼放到一個js文件里，然后在main.js里引入，自執(zhí)行函數(shù)直接解決這個適配問題，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;
        //設(shè)計圖的寬高
        var designWidth = 1920,
            designHeight = 1080,
            widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        //設(shè)置縮放屬性
        document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
        // 應(yīng)對瀏覽器全屏切換前后窗口因短暫滾動條問題出現(xiàn)未占滿情況
        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);
    //監(jiān)聽頁面變化
    win.addEventListener("resize", refreshScale, false);
})(window)

三、Echarts

1. echarts 官網(wǎng)對于api 和 option 的解釋很清晰全面，看官網(wǎng)解決大部分問題。

2. 圖表option 可能存在大量重復(fù)配置項，比如整個大屏風(fēng)格顏色，可以把公共的抽離成一個js對象，然后利用對象合并，既保證了代碼簡潔，后面修改和維護也方便。

3.圖表適配問題，圖表適配保證視口變化，圖表不會變得扭曲。在根組件App.vue監(jiān)聽一下。update 通過 prop分發(fā)給每個圖表組件。時間戳保證更新狀態(tài)。

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

圖表所在組件監(jiān)聽一下變化，調(diào)用echarts內(nèi)置函數(shù)resize。

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

4. echarts 地圖問題，地圖的話echarts5.0.0以后的版本往后應(yīng)該是不內(nèi)置了，我下載了4.9.0版本的。最開始我下載的也是最新的，發(fā)現(xiàn)這個問題，我就降版本了。

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

這樣就可以配置地圖了，比較新的版本，不降版本也行，你網(wǎng)上找一份這個地圖js文件，放到項目里也可以。

四、實時更新

實時更新怎么做，就是輪詢。將請求過來的數(shù)據(jù)在App.vue 組件利用prop分發(fā)給每個圖表組件。watch監(jiān)聽一下（deep），重新 init 圖表。記得銷毀定時器。

wheel() {
   this.timer = setInterval(() => {
      console.log("輪詢調(diào)用接口中...");
      this.queryData();
   }, 60000); // 6秒一次
},
queryData() {
    // 請求接口 沒用axios就用fetch     
},

到此這篇關(guān)于Vue Echarts實現(xiàn)實時大屏動態(tài)數(shù)據(jù)顯示的文章就介紹到這了,更多相關(guān)Vue Echarts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: