Since the emergence of large screen visualization, it has been deeply sought after by enterprises from all walks of life. The most typical is the large screen with double 11 sales of Taobao every year. Recently, I just came into contact with a large screen project to summarize some visual large screen production experience and share with you.
This large screen looks high-end and high-grade, but its development steps are not as simple as expected. There are five basic steps:
Large screen development tool
There are generally two ways to develop a large visual screen, one is to develop with code, and the other is to make it with ready-made visual tools.
JS + ecahrts are mostly used, but more technologies should be called for data volume support, background response, real-time update, platform operation and maintenance, which tests the technical level. Therefore, I recommend directly using visual tools, such as finereport, datav, etc., which are simple and convenient. The key point is that there is no need to write a lot of code, The visualization effect of the self-contained chart plug-in is very cool. Take finereport as an example to demonstrate how to make such a large visual screen.
Before making a report, you first need to define the data source. Generally speaking, the enterprise data is saved in the database and is constantly updated. Finereport can directly link with the database and use the data in the database to make a report, and the report content will be updated with the update of the database.
New decision report
After the database is linked, we will create a new report template and prepare to start production. Finereport has three report modes. Ordinary reports are suitable for some conventional statistical reports, aggregate reports are mainly used for Chinese complex tables, and decision reports are suitable for making large screens or cockpits.
Therefore, we select the decision report to create a large screen, open the decision report mode of fineport designer, and create a new decision report:
Create a new dataset and store the data required in the database in the dataset:
Finereport decision report adopts canvas layout. Chart components can be dragged and placed freely. It is very flexible. Dozens of chart types are built in, which is basically enough.
According to the previously designed layout, we drag the chart to the corresponding position, then define the data links respectively, and the large screen prototype is completed:
After the chart layout, the next step is to beautify the color, background, chart title and other details.
- Color matching
It is best to use a dark background for the large screen background, because the dark background can not only reduce the discomfort caused by stitching, but also reduce the impact of screen color difference on the overall performance; At the same time, the dark background can focus more on vision, and it is also convenient to highlight the content and make some cool effects such as streamer and particles
Here are some recommended color schemes:
The background does not have to use color, but dark pictures can also be used. It can be combined with some other realistic features to make the whole look more scientific and technological. It is recommended to use some pictures with stars, stripes, gradient lines, embellishment effects, etc.
- Unified chart series and label color matching
On the large screen display, the details will greatly affect the overall effect. It is necessary to add some decorative effects such as borders and pictures to the elements, titles and numbers to help improve the overall aesthetics.
Dynamic effect display
In the last step, in fact, a large screen is almost finished. If you don’t think it’s cool enough, you can also use some 3D dynamic chart plug-ins to increase the sense of science and technology. Finereport provides many such plug-ins that can be downloaded to improve the force of large screen.
Finally, save, click preview, and a perfect large visual screen is completed.