The Design And Implementation Of Graphics Display System Facing To Large Screen

With the rapid development of information technology in modern society,the data that needs to be analyzed in various industries is increasingly complex and huge.So in the face of increasing data analysis needs,data visualization has become one of the most important technical means,and helps people to analyze the value behind it in an intuitive way in the big screen of data.The large screen referred to in this paper is a comprehensive means of data visualization,which integrates different types of data through various and appropriate charts to form a complete data visualization interface,which is often placed on the screen carrier.This carrier has a variety of resolutions and sizes.At present,data visualization tools are mainly divided into two categories.One is a programming framework for software technicians,which mainly provides data visualization for developers to provide interfaces;the second category is general User's visualization software system.However,users currently have a need of visualize large screens to analyze data.This puts higher demands on data visualization tools,such as higher performance,lower learning costs,and easier operation.Aiming at the above problems,this paper designs and implements a Web-based multi-type data visualization system through detailed research on the related visualization technology and visualization system status,so that many ordinary users can easily create a data visualization large screen using this system and complete the data analysis work.The research content and work of this paper mainly include the following four parts:(1)Based on Vue.js and Node.js,this paper designs a universal data visualization chart system that generates multiple types of charts and finally displays them on a large screen.(2)Based on the ECharts visual framework design,this paper implements a set of chart configuration schemes,which can interface with multiple types of data and provide users with friendly interaction effects of drag and drop layout.(3)This paper designs and implements a variety of data source docking methods,which are mainly divided into database docking,front-end input static JSON data docking,Mock data docking and uploading local CSV files.(4)This paper designs and implements a fast rendering mechanism for large screen pages.Detailed functional testing and performance testing have verified that this mechanism improves the loading speed of large-screen page published by users on the browser side.The web-based data visualization chart system in this paper supports multiple user roles and has convenient user management functions.The system adopts the front-end separation architecture.The front-end part is based on Vue.js to implement a single-page application and the back-end is based on Node.js.The overall architecture conforms to the componentized and modular design principles.In addition,in order to solve the problem that the data visualization with large data volume and a large number of charts is slow to render on the browser side,the system provides a set of large screen page fast rendering mechanism from the architectural level.The main content of the mechanism is divided into two aspects: One is to customize a set of extensible JSON Schema large-screen page description language for the characteristics of data big screen.The other is to provide a large-screen page back-end rendering engine.In the Node.js runtime environment,the charts in the large-screen page are rendered in SVG mode for back-end rendering,and HTML documents containing large-screen page results are generated.And the large screen page is finally released as a URL.Finally,the system has passed a series of functional tests,unit tests and performance tests,which meet the functional and non-functional requirements of the system and have high practical application value.