How to implement Echats chart large screen adaptation
describeUsing 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. accomplish1. 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 SummarizeThis 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
Recommend
Solution to Navicat Premier remote connection to MySQL error 10038
Remote connection to MySQL fails, there may be th...
How to redirect URL using nginx rewrite
I often need to change nginx configuration at wor...
Mysql 5.6 adds a method to modify username and password
Log in to MySQL first shell> mysql --user=root...
HTML realizes real-time monitoring function of Hikvision camera
Recently the company has arranged to do some CCFA...
React Native scaffolding basic usage detailed explanation
Build the project Execute the command line in the...
Navigation Design and Information Architecture
<br />Most of the time when we talk about na...
Example of converting webpack images to base64
Download url-loader yarn add -D url-loader module...
Vue implements an example of pulling down and scrolling to load data
Table of contents Step 1: Installation Step 2: Ci...
Comprehensive summary of mysql functions
Table of contents 1. Commonly used string functio...
Introduction to CSS foreground and background automatic color matching technology (demo)
1. Color matching effect preview As shown in the ...
Mysql master/slave database synchronization configuration and common errors
As the number of visits increases, for some time-...
Mobile Internet Era: Responsive Web Design Has Become a General Trend
We are in an era of rapid development of mobile In...
VUE introduces the implementation of using G2 charts
Table of contents About G2 Chart use Complete cod...
Let's talk about the performance of MySQL's COUNT(*)
Preface Basically, programmers in the workplace u...
Summary of basic knowledge and operations of MySQL database
This article uses examples to explain the basic k...