Don’t use a line of code to teach you how to make a cool visual large screen from 0 to 1

Time:2021-7-30

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:

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

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.

Data preparation

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.

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

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:

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

New dataset

Create a new dataset and store the data required in the database in the dataset:

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Design report

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.

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

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:

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Detail beautification

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:

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

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

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

  • Embellishment

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.

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

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.

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Finally, save, click preview, and a perfect large visual screen is completed.

Template display

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1

Text source:https://www.toutiao.com/i6820…

Don't use a line of code to teach you how to make a cool visual large screen from 0 to 1