How to implement Echats chart large screen adaptation

describe
accomplish
The project directory structure is as follows
The effect diagram is as follows
Summarize

describe

Using charts combined with data can create intuitive visual effects. Large-screen display has become a common scenario for corporate data display. How to achieve large-screen adaptation is a problem we need to solve. The following is one of the solutions, using the transform attribute of CSS and the design percentage. If there are any deficiencies, please criticize.

accomplish

1. Prepare a container component with width = 100vw, height = 100% as the background for large-screen display:

 <div class="screen-adapter">
 </div>
 
 .screen-adapter {
  width: 100vw;
  min-height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background: #0c1a3c;
}

2. According to the design drawings provided by the designers, the percentage of each area can be calculated. For example, if the total size is w*h, and the width and height of one icon is w1 * h1, the conventional image cutting can be achieved. At this time, from 1-->2, we can get:

<div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot></slot>
    </div>
</div>
props: {
    w: { // Design drawing size width type: Number,
      default: 1600
    },
    h: { // Design drawing size height type: Number,
      default: 900
    }
},
data () {
    return {
      style: {
        width: this.w + 'px',
        height: this.h + 'px',
        transform: 'scale(1) translate(-50%, -50%)' // No scaling by default, vertical and horizontal centering}
    }
}
  
.content-wrap {
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
}

3. Based on the second step, you need to calculate the scaling ratio according to the specific size of the large screen, and set the scaling ratio. It should be noted that when binding the resize event, don't forget to prevent shaking, and don't forget to remove the listening event when the page is destroyed:

mounted () {
    this.setScale()
    this.onresize = this.debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
},
beforeDestroy () {
    window.removeEventListener('resize', this.onresize)
},
 methods: {
    // debounce (fn, t) {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // Get the scaling ratio getScale () {
      const w = window.innerWidth / this.w
      const h = window.innerHeight / this.h
      return w < h ? w : h
    },
    // Set the scaling ratio setScale () {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
    }
  }

4. At this point, the general structure has been obtained. You only need to put the restored design drawings of each part of the icon component into the previous slot. The size of each part of the icon component can be based on the percentage provided by the design. All the codes are roughly as follows:

// ScreenAdapter.vue
<template>
  <div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    w: {
      type: Number,
      default: 1600
    },
    h: {
      type: Number,
      default: 900
    }
  },
  data () {
    return {
      style: {
        width: this.w + 'px',
        height: this.h + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted () {
    this.setScale()
    this.onresize = this.Debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onresize)
  },
  methods: {
    Debounce (fn, t) {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    getScale() {
      const w = window.innerWidth / this.w
      const h = window.innerHeight / this.h
      return w < h ? w : h
    },
    setScale() {
      this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
    }
  }
}
</script>
<style>
.screen-adapter {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: #0c1a3c;
}
.content-wrap {
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
</style>

The project directory structure is as follows

The effect diagram is as follows

It can be seen that the font charts are all scaled proportionally

Summarize

This is the end of this article about the adaptive implementation of Echats charts on large screens. For more relevant content on adaptive Echats charts on large screens, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: In-depth study of MySQL composite index

>>: A brief discussion of several browser compatibility issues encountered