The words written in the front

When I first came into contact with large-screen visualization, I had no idea what to do. I used to open simple books and nuggets to search for the solutions of excellent leaders. I read several articles and summarized the pits I had stepped on in actual projects, and divided the large-screen visualization into three parts: Page layout, screen adaptation, and Echarts usage, so this article is based on these three points (first technical article, as a summary of my own project).

The page layout

After to get the design drawing, usually through the layout of the design first to think about the design of the code, which is set out to write code has to be before the step in the project, I met, in a larger figure development to half of the time involved, and the other a front-end development together, result because she put the picture on all charts in a vue file inside, As a result, the entire page to thousands of lines of code order of magnitude, and intervention after the cooperation, because two people in a file for development, to merge conflicts often leads to submit code, after the lesson, in the second phase of refactoring, the first step is to take apart the entire page, it can not only better division of labor cooperation, but also conducive to the late code maintenance. (Most developers do this, just to remind themselves)

1. Divide pages

Typically, large screens are made up of diagrams one by one, and for aesthetic reasons, UI designers design diagrams into square blocks. Here are two layouts:

Figure 1 can be divided into left, middle and right, figure 2 into upper, middle and lower, and then divided into smaller modules according to specific design drawings.

2. Modular development

After dividing the page, the specific modules should be listed as a separate VUE page for development, and then all modules are introduced into the index page as components to form the final large screen page.

Screen adaptation

1. The use of flexible

For PC side screen adaptation, there are many solutions on the Internet, I will not expand here, interested people can search for their own. My approach is Ali’s flexive.js. The specific plan is as follows

  • In the project, the large screen page is only part of it, and other pages do not need to be adapted. Therefore, the method referenced in main.js is not adopted. Similarly, the global PX to REM method is not adopted. Instead, use REM alone on the introduction page.)
  • Open the flexibility.js file and set the number of px for 1rem. Take 1920px as an example and divide it into 24 equal parts, so 1rem = 80px

  • Due to the above reasons, it is necessary to manually convert px to REM in the form of 80px = 1REM in the large-screen page. In order to avoid the disadvantages of manually calculating REM every time, it is recommended to use the PX2REM plug-in when using VS Code for development

After downloading from the app store, open vs Code Settings, search rootFontSize, change the value to PX and convert it to REM (for example, flexibs. js 80px = 1REM, rootFontSize should be set to 80), save the file, restart, and open the large screen. Typing px in will automatically display the converted REM

Echarts use

1. Vue introduced echarts

  • Install echarts dependencies

npm install echarts -S

  • The introduction of echarts
  1. Introduced the global
// main.js
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts
Copy the code
// echarts.vue
<template>.<div id="myChart" :style="{width: '300px', height: '300px'}"></div>.</template>
<script>.methods: {drawEcharts(){
         let myChart = this.$echarts.init(document.getElementById('myChart'))... }}...</script>

Copy the code

2. Import it from the page

// echarts.vue
<template>.<div id="myChart" :style="{width: '300px', height: '300px'}"></div>.</template>
<script>
 import echarts from 'echarts'.methods: {drawEcharts(){
         let myChart = echarts.init(document.getElementById('myChart'))... }}...</script>

Copy the code

Note: Echarts instantiation objects need to be implemented in Mounted to ensure that dom elements are already mounted to the page

2. Echarts use

You can go to the echarts website to view the relevant parameters, and you can also go to the Echarts community to view the relevant examples. In addition, I recommend dataV, in which you can choose some nice borders and charts, but it should be noted that dataV is not compatible with Internet Explorer on earlier browsers, and in this project, it just needs to be compatible with Internet Explorer. Therefore, the solution I adopted was:

1. Install Babel – polyfill

npm install --save-dev babel-polyfill

2. Introduction of Babel – polyfill

//main.js
import 'babel-polyfill'
Copy the code
  • Vue-cli version 2
//webpack.base.conf.js.. {test: /\.js$/,
  loader: 'babel-loader'.include: [resolve('node_modules/@jiaminghi/data-view')]},...Copy the code
  • Vue-cli version 3 or later
//vue.config.js.transpileDependencies: [/[/\\]node_modules[/\\][@\\]jiaminghi[/\\]data-view[/\\]/]...Copy the code

conclusion

Large screen visualization is the demand we often meet in the actual project, but when doing, and need to spend a lot of thought, this article is only to introduce a design scheme, to really complete a visual interface, or have to spend more thought, pay attention to CSS details, try to restore the design.