Vue Echarts realizes real-time large-screen dynamic data display

Preface

Because it is a large screen for online applications of state-owned enterprises, I will not attach pictures. The code is for reference only.

1. Vue configuration

1. I built it with vue-cli. The large-screen project is not very complex. Vue-router, vuex, axios, sass, etc. are not used, vue and echarts are enough.

2. The configuration is normal, and I won’t show the basic configurations such as the exit entrance. These two configuration items are still useful for large screens. The main reason is that I split each chart into a separate component, without encapsulating the public chart components, some duplicate styles and some scss functions can be written in public files, I used sass in the development environment.

 = {
  configureWebpack: {
  name: "", // Packed browser title, large screen full screen display is of little use  resolve: {
    alias: {
     '@': resolve('src')
    }
   }
  },
  css: {
    // Global public css    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/";` // This is to add a prefix code to each css file      }
    }
  }
}

2. Adaptation plan

Since it is a large screen, it must be adapted. There are many adaptation solutions online, but I won’t introduce them much, I will only talk about the solutions I really use. The following code is placed in a js file and then introduced in it. The self-executing function directly solves this adaptation problem. The advantage of js is that it is not limited to the js framework you use. After adaptation, the unit can be px and percentage. The flex layout simply divides a large screen into a graph into a component, and just put it into pieces.

(function (win) {
    var bodyStyle = ('style')
     = `body{width:1920px; height:1080px!important;overflow: hidden}`
    (bodyStyle)
    function refreshScale() {
        let docWidth = ;
        let docHeight = ;
        //The width and height of the design drawing        var designWidth = 1920,
            designHeight = 1080,
            widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        //Set the zoom properties         = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
        // Response to the windows before and after switching full screen of the browser due to short scroll bar problems        setTimeout(function () {
            var lateWidth = ,
                lateHeight = ;
            if (lateWidth === docWidth) return;
            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
             = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
        }, 0)
    }
    refreshScale()
    ("pageshow", function (e) {
        if () { // Recalculate when the browser is back            refreshScale()
        }
    }, false);
    // Listen to page changes    ("resize", refreshScale, false);
})(window)

3. Echarts

1. The echarts official website has a clear and comprehensive explanation of API and option, and it is easy to solve most of the problems.

2. Chart option There may be a large number of repeated configuration items, such as the entire large-screen style color, which can be separated into a js object and then merged with the objects, which not only ensures the concise code, but also facilitates later modification and maintenance.

3. Chart adaptation issues. Chart adaptation ensures that the viewport changes and the chart will not become distorted. Listen in the root component. update is distributed to each chart component via prop. Timestamps ensure update status.

mounted() {
   ("resize", () => {
      = new Date().getTime();
   });
}

The component where the chart is located listens for changes and calls the built-in function resize for echarts.

 watch: {
    upDate() {
       && ();
    }
 }

4. Echarts map problem. For the map, the versions of echarts5.0.0 after the future should not be built-in. I downloaded the 4.9.0 version. At the beginning, I downloaded the latest one. When I found this problem, I lowered the version.

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

In this way, you can configure the map. A relatively new version is fine. You can find a map js file online and put it in the project.

4. Real-time update

How to do real-time updates is polling. The requested data is distributed to each chart component using prop. Watch listen (deep) and re-init the chart. Remember to destroy the timer.

wheel() {
    = setInterval(() => {
      ("Poling in the call interface...");
      ();
   }, 60000); // Once every 6 seconds},
queryData() {
    // Request the interface. If you don't use axios, use fetch},

This is the article about Vue Echarts real-time large-screen dynamic data display. For more related Vue Echarts content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!