As big data technology has gradually become a key role in the data era,how to process and analyze complex data,and how to make big data more intuitive to serve users,data visualization is undoubtedly the most effective technical support.Assisting users to manage complex data by means of visualizing large screen display is becoming a key part of big data solutions day by day.However,the existing data visualization still suffers from large data rendering delays,weak interaction ability of dynamic linkage of visualization charts,and abnormal interruption of rendering due to large amount of real-time data and complex network,which restricts the wide application of data visualization technology.In view of the above problems,this thesis focuses on the key technologies of design mode,Echarts large-screen visualization,and dynamic real-time interaction,and conducts deep research on real-time rendering and dynamic interaction of visual pages.The main research work is as follows:(1)In view of the problem of rendering delay of visualization pages,the Diff difference algorithm(Diff algorithm)based on Vue framework is designed and optimized under static detection.Firstly,the key strategy is used to establish Map mapping relationship for static nodes and dynamic nodes respectively.Then in the Diff process,only the dynamic node differences in the old and new virtual DOM trees are compared,and the static nodes are directly reused.Finally,the effectiveness of the optimized Diff algorithm is further verified through the comparative analysis of simulation,which significantly improves the rendering efficiency of page update.(2)In view of the weak dynamic interaction and interaction ability of visual charts,by studying the caching technology and Echarts chart rendering technology,the Echartsbased large-screen component linkage trigger rendering method is designed and optimized.The cache mechanism is used to separate storage and update of data with the idea of time-sharing and multiplexing,and at the same time,the interaction network between components is established with the idea of component-based separation and multiplexing.Enables linkage trigger interaction between components to achieve global synchronous rendering of pages.It further enhances the linkage interaction between charts,and improves the linkage rendering efficiency of pages.(3)In view of the problem of large amount of real-time data and complex network leading to abnormal rendering,through the study of Websocket real-time transmission protocol and HTTP protocol theory,a dynamic data real-time transmission method combining Websocket and HTTP is designed.And study the heartbeat timing detection method to ensure that the Web server and the client can be online synchronously.It solves the problem of rendering interruption caused by network abnormality,ensures the realtime and stability of data transmission,and improves the real-time rendering efficiency of page data.Finally,facing the complex production data of intelligent equipment of an enterprise in Dongguan,aiming to meet the individual needs of the enterprise,the design of a largescreen Web visualization system with large data volume is completed.The overall function test of the designed system has been carried out,and the overall function has passed the technical acceptance.At present,it has been successfully applied to the enterprise intelligent monitoring platform with good results. |