Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "vue large screen visualization adaptation method", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue large screen visualization adaptation method" article can help you solve your doubts, the following follow the editor's ideas slowly in depth, together to learn new knowledge.

1. Divide the page

Usually, a large screen is made up of one chart after another, and in consideration of beauty, UI designers will design the diagram into a boxy module. Here are two layouts:

Figure 1

Figure 2

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

two。 Modular development

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

Example

Screen adaptation

1. Use flexible

For the PC side of the screen adaptation, there are many processing programs on the Internet, there is no repetition here, those who are interested can be on their own Baidu. The way I use is Ali's flexible.js. The specific plan is as follows

Introduce the large-screen page locally as a js file (the global installation is not adopted here, because in the project, the large-screen page is only part of it, and the rest of the page does not need to adapt, so it is not referenced in main.js, similarly, it does not use the way of global px to rem, but uses rem separately in the introduction page)

Open the flexible.js file, set the number of px corresponding to 1rem, take the design draft 1920px as an example, divide it into 24 equal parts, then 1rem = 80px

Because of the above reasons, you need to manually convert the px used into rem in the large screen page in the form of 80px = 1rem. In order to avoid the disadvantage of manually calculating rem every time, if you use vs code for development, it is recommended to use the px2rem plug-in.

After downloading in the App Store, open the settings of vs code, search rootFontSize, change the value to the value of px to rem (for example, 80px = 1rem in flexible.js, then rootFontSize should be set to 80), restart after saving, open the large screen page, and enter px in the will automatically display the converted rem.

Echarts usage

1.vue introduces echarts

Install echarts dependencies

Npm install echarts-S

Introduction of echarts

1. Global introduction

/ / main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts// echarts.vue. Methods: {drawEcharts () {let myChart = this.$echarts.init (document.getElementById ('myChart'))...}}.

two。 Introduce into the page

/ / echarts.vue...... Import echarts from 'echarts'... Methods: {drawEcharts () {let myChart = echarts.init (document.getElementById ('myChart'))...}}.

Note: the instantiated object of echarts needs to be implemented in mounted to ensure that the dom element has been mounted on the page

2.echarts usage

For the use of echarts, you can check the relevant parameters on the official website and the relevant examples in the echarts community. In addition, you can recommend dataV, where you can choose a small number of good-looking borders and charts, but it should be noted that dataV is not compatible with IE in the lower version of the browser, and it happens to be compatible with IE in this project. Therefore, the solution I adopted is:

1. Install babel-polyfill

Npm install-save-dev babel-polyfill

two。 Introduction of babel-polyfill

/ / main.jsimport 'babel-polyfill'

Vue-cli version 2

/ / webpack.base.conf.js.... {test: /\ .js $/, loader: 'babel-loader', include: [resolve (' node_modules/@jiaminghi/data-view')]},...

Vue-cli version 3 or above

/ / vue.config.js...transpileDependencies: [/ [/\] node_ modules [/\] Jiaminghi [/\] data-view [/\] /]. After reading this, the article "the method of vue large screen Visualization adaptation" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

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.