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
Detailed explanation of interface request management based on Typescript and Axios
Table of contents Ideas Request interception Resp...
A brief talk about JavaScript variable promotion
Table of contents Preface 1. What variables are p...
Use of JavaScript sleep function
Table of contents 1.sleep function 2. setTimeout ...
How to use Docker to build a pypi private repository
1. Construction 1. Prepare htpasswd.txt file The ...
Several ways to implement "text overflow truncation and omission" with pure CSS
In our daily development work, text overflow, tru...
Detailed explanation of MySQL Strict Mode knowledge points
I. Strict Mode Explanation According to the restr...
Share a Markdown editor based on Ace
I think editors are divided into two categories, ...
Detailed explanation of object literals in JS
Table of contents Preface 1. Set the prototype on...
Examples of using HTML list tags dl, ul, ol
Copy code The code is as follows: <!-- List ta...
Some thoughts and experience sharing on web page (website) design and production
First, before posting! Thanks again to I Want to S...
How to install Graphviz and get started tutorial under Windows
Download and installConfigure environment variabl...
Solution to garbled display of Linux SecureCRT
Let's take a look at the situation where Secu...
Examples of clearfix and clear
This article mainly explains how to use clearfix a...
Vue-router example code for dynamically generating navigation menus based on backend permissions
Table of contents Vue.js 1. Register global guard...
Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)
Preface This article mainly introduces the relati...