This is the first day of my participation in Gwen Challenge

Some experiences about visualizing large screens

Introduction: Recently, I need to make a large visual screen. The first thing THAT comes to mind is the selection of technology: Vue +ECharts(after all, I am familiar with it); Second, consider the compatibility of the browser, in three considerations using VUE + ECharts +Datav(datav.jiaminghi.com/)

(All are introduced in the form of CDN)

Problems encountered

Remember this first:

compatibility

Component library development and debugging are all using Chrome browser, there is no time and energy to do other browsers compatibility, especially IE.

So use Chrome.

Start coding

First write the global container (” Data visualization pages are generally displayed in full screen in the browser, and the full screen container will automatically scale according to the screen ratio and the current browser window size. When the browser is full screen, the full screen container will fill the screen “)

<dv-full-screen-container>content</dv-full-screen-container>

The important thing to note here is that using global containers can cause unexpected problems. For example, using absolute and relative positioning can affect layout. After all, Datav uses flex layout;

Use borders (layout within borders)

The width and height of the border component are 100% by default. Nodes inside the border component will be slot allocated to the container with class border-box-content under the border component. If necessary, arrange the layout for this container to avoid style conflicts and abnormal display of the border.

But the borders are drawn by SVG elements and are lightweight and undistorted, making them extremely easy to use


dv-border-box-1

After using the border, I set the width and height of the embedded image to be a little distorted. And it’s not going to look the way I want it to look, and then when I set the inline style to work it’s going to misplace in the browser; Solution: Don’t use borders; Write your own DIV for nesting;

Rank the round-robin table

The ranking table is similar to the table. You can also select single or full page.

I use a single wheel

< span style = “box-sizing: border-box;

The above are the techniques and frameworks I used to write the visual large screen; Please inform xiaobian in time if compiling errors; Modify; This is the first time to write a large visual screen, please give us more advice and point out the shortcomings. Welcome to comment and discuss