Dashboard Layout Beautification
Overview
After the dashboard is completed, we can perform combination layout and beautification on the cards, making the content in the cards clearer and more readable.
This case will guide you through making a beautiful dashboard through combination layout of cards and setting dashboard themes.
The case effect is as follows:
Implementation Approach
-
Card Combination Layout: Add components to the dashboard, combine cards with related content, such as using Card Group Component to combine them into a visualization area or using Tab Component to distribute cards with different content across different tabs.
-
Dashboard Overall Beautification: Click the Theme button to enter theme editing mode, adjust the dashboard theme and various styles, and finally form a beautiful dashboard.
Example Steps
Card Combination Layout
Tab Component
Tabs are important component elements in BI visualization dashboards. They can help users organize and classify different data views, provide multi-perspective analysis capabilities, save dashboard space to make the interface cleaner and clearer, improve data readability, and enhance users' understanding of data. A dashboard can contain multiple tabs, each tab can represent different business themes or datasets, and users can view different data content by switching tabs. Generally, a tab will have a batch of related data views.
For example, in financial business scenarios for cost-benefit analysis, common indicators include net profit margin, gross profit margin, and operating profit margin. Presenting these related indicators through visualization charts allows users to easily compare their changing trends and relationships. Users only need to quickly switch in the same interface to obtain the required information, thereby improving the efficiency and accuracy of data analysis.
You only need to create a "Tab Component" and place related cards in the corresponding tabs as needed. The demonstration effect of the tab component is as follows:
Dashboard Theme
On the dashboard page, click the Page Style button in the upper right corner, and the theme configuration sidebar will pop up on the right side of the page. You can set the dashboard theme, global styles, dashboard component styles, cards, and general content styles here as needed. We will next guide you to experience operations such as one-click theme skin change and custom themes.
One-click Theme Skin Change
Add a theme to the dashboard. Dashboard themes can adjust the dashboard style and UI style with one click. The system has 6 themes in total, and you can choose as needed. This case chooses to adopt the Gray-White theme.
Custom Theme
If the default theme styles provided by the system cannot meet your needs, you can also make custom adjustments under the current theme, such as adjusting global styles, dashboard component styles, cards, general content styles, etc. as needed. The specific demonstration effect is as follows:
More
You have learned to perform overall beautification design on the dashboard. Next, you can enter [Save and Share with Others](7-Save and Share with Others.md) to learn how to export the dashboard and share it with others for collaboration.