current position:Home>Big data front-end visualization screen -- the road of front-end development

Big data front-end visualization screen -- the road of front-end development

2022-05-15 02:20:47Wang Haihu

from 2016 In, he began to contact the direction of Visualization , I've always wanted to write an article to review the pits I've stepped on in recent years , In the following period of time, I will share with you some experience and insights in visualization from time to time , Send it out and share it with you 、 Discuss together 、 Learn together and make progress .


This article serves as a starting point , Then a series of pit records will be issued from time to time , Sort out the common problems of big data visualization screen , And in-depth optimization for unique scenes . This article first takes you familiar with what is visualization ? What are the common visualization components ? What are the commonly used visualization technology stacks ? How is the visual engineering framework ? Common visualization problems ( No answers , If you have any questions, you can comment below. I will answer them separately , If there are many problems, I will write a separate article to explain in detail ).

One 、 What is visualization

I believe you are not unfamiliar with the word big data visualization , from 17 Century maps and graphics to 19 The invention of the pie chart at the beginning of the century , The concept of using charts to understand data has existed for centuries . Visualization has always been with our lives , It is everywhere in our life , Tianxiang 11shuang 、 The goddess Festival collects all kinds of index data , Like the weather in our life 、 traffic 、 Operation and maintenance ... All need Visualization . With the advance of the digital age , The advent of the information age , Our data volume is slowly becoming huge , We use simple data tables 、 The log has been unable to view important information , Must rely on Visualization !

Two 、 What are the common components of visualization ? What is the common technology stack ?

1. Broken line diagram


2. Histogram  


3. Scatter plot


4. Pictogram


5. Radar map


6. The pie chart


7. Water wave ball


8. The dashboard


9. Map

Echarts、[email protected]

12. Topology

[email protected]、Vis、D3、d3-graphviz

13. Heat map

Echarts、[email protected]、Heatmap

14. Rectangle



15. Sunrise chart


16. Sanguitu


 17. 3D The pie chart


18. 3D scene


 18. 3D GIS scene



There are many common visualization components, which are not listed here , If you are interested, you can have a look Echarts The official website is relatively complete , You can also have a look at D3.js This book records the implementation scheme of many charts .

3、 ... and 、 Front end visualization engineering architecture


Four 、 What are the common visualization problems ?

The following questions will be described in detail in a separate article , If you have any questions, you can also comment below , Discuss learning together

1. Visual large screen development how to adapt to multiple terminals ?
2. Visualize how the large screen can be displayed accurately on the splicing screen ?
3. How to solve large screen distortion 、 Small screen text blur problem ?
4. How to optimize the speed of large screen ?
5. How to make the large visual screen compatible with low version ?
6. As the size of the visualization screen increases , How to optimize the excessive consumption of resources ?
7. 3D GIS How to decide the offline scheme ?
8. 3D Scene collision detection 、 How does horizon analysis achieve ?
9. large BIM Model loading is too slow , What is the optimization scheme ?
10. 2d、3d Dynamic Caton , How to optimize the continuous increase and change of memory ?

copyright notice
author[Wang Haihu],Please bring the original link to reprint, thank you.

Random recommended