The large visual screen template shared before has been well received by all friends, but there are also many private messages asking: What should I do if I want to make a large visual screen by myself? I sorted out the method of my "Super God" colleague. He can make a large visual screen from zero without writing functions and complicated codes!
It took me a long time to sort it out, which can be roughly divided into three steps:
First, conduct needs research
Before all actions are taken, user needs need to be clarified, because the visual cockpit is actually a data product, which can be understood as: Who is the cockpit for? What does he want to see? What are key data indicators?
If you encounter a complex management cockpit that involves multiple data indicators and the calculation process is complicated, it is recommended that you use the fishbone diagram to sort out the requirements (as shown below)
Secondly, it is necessary to carry out the prototype and visual design of the large screen
After determining the data indicators to be displayed, the next step is to select the corresponding chart according to the scenario analyzed by the indicator. Here is a classic chart selection guide for your reference:
Next is the real development link, choose a professional visualization software to do it, here is FineReport, a well-known visualization tool in China.
Open the designer and create a new decision report: the decision report adopts a canvas interface, and the chart components and controls on it can be dragged to the panel and laid out at will
Create a new data set, and retrieve the data set to be used through the sql statement. The data source I use is the data that comes with the software. Don’t worry about friends who don’t have SQL foundation, they are all the most basic statements used, just read it a few times and you’ll be fine.
Create a new template dataset as follows:
After the data is ready, drag and drop the corresponding chart components onto the canvas according to our previous layout layout:
Up to the previous step, our cockpit prototype came out, and then we bound the data source for each chart component, set the style and special effects, and it was almost the same. The setting of the basic chart is very simple, so I won’t show it. Let me show you the data map setting:
Finally, perform online debugging
Follow the above steps step by step and go online to see if the key visual elements, font size, page dynamics, graphics and charts are displayed as expected, whether there is deformation, misplacement, etc.
Click preview, and a cool visual cockpit will appear in front of your eyes:
