Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to achieve Echats chart large screen adaptation". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Realize

1. Prepare a container component, width = 100vwMagneHeigh = 100%, as the background for large screen display:

.screen-adapter {width: 100vW; min-height: 100%; max-height: 100vh; overflow: hidden; background: # 0c1a3c;}

two。 According to the design drawings provided by the design students, you can calculate the percentage of each part of the area. For example, the total size is w * h, and the width and height of one of the icons is w _ 1 * h _ 2. In this case, you can cut the image routinely, which can be obtained from 1m / m-> 2:

Props: {w: {/ / Design drawing size width type: Number, default: 1600}, h: {/ / Design drawing size High type: Number, default: 900}}, data () {return {style: {width: this.w + 'px', height: this.h +' px' Transform: 'scale (1) translate (- 50%,-50%)' / / do not scale by default Center vertically and horizontally}}. Content-wrap {transform-origin: 0 0 Position: absolute; top: 50%; left: 50%;}

3. Based on the second step, you need to calculate the zoom ratio according to the specific size of the large screen, and set the zoom ratio. It is important to note that do not forget to prevent shaking when binding resize events, and remove listening events 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: {/ / Anti-shake 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 zoom 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%)` } } 4.至此，大概结构已经得到，只需要将各部分图标组件还原的设计图放入之前的 插槽即可，各部分图标组件的尺寸按照设计提供的百分比即可，所有代码大致如下： // ScreenAdapter.vue 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 (), 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%) `}}. Screen-adapter {width: 100%; min-height: 100vh; max-height: 100vh; overflow: hidden; background: # 0c1a3c;} .content-wrap {transform-origin: 00; position: absolute; top: 50%; left: 50%;} project directory structure is as follows

The effect picture is as follows

As you can see, the font charts are scaled in proportion.

"how to achieve Echats chart large screen adaptation" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.