Skip to content

⑦ Усовершенствование макета дашборда - Помощь FineReport | Разработка отчетов | Использование отчетов | Учебные пособия

⑦ Усовершенствование макета дашборда

1. Обзор

После создания всех компонентов по отдельности необходимо проработать дизайн макета дашборда.

2. Общие сценарии

Давайте начнем с краткого обзора некоторых распространенных функциональных сценариев, которые будут рассмотрены в примерах этой статьи.

2.1 Добавление дополнительных компонентов

В интерфейсе редактирования дашборда вы можете добавить другие компоненты, чтобы обогатить интерфейс. Вы можете добавить компонент изображений, текстовый компонент и веб-компонент, нажав кнопку "Другие" в интерфейсе редактирования дашборда.

Подробнее о других функциях компонента можно узнать из документации:Обзор других компонентов.

仪表板布局111.png

2.2 Улучшение дашборда

Как быстро создать диаграмму данных? Дополнительную информацию см. в разделе: Руководство по визуализации

1633586666381027.png

Для дизайна дашборда обычно используется "Стиль дашборда ", на вкладке компонента нажмите "Настройка стиля ".

Если вы хотите настроить стиль каждого графика по отдельности, перейдите в раздел "Дизайн компонента". См. подробнее: Стили графических компонентов

3. Примеры

3.1 Компонент вкладки

Для компонентов с настраиваемыми макетами создается ощущение, что некоторые из них находятся в одной теме и могут отображаться на одной вкладке.

1) Нажмите "Другое > Компоненты вкладок" и перетащите компонент на страницу вкладки. Нажмите "+" в правой части страницы вкладок, чтобы добавить новую вкладку.

images/1680485414601456.gif

Страница вкладокВстроенный компонент
Анализ продажДесять популярных продуктов с наибольшими объемом продаж и коэффициентом объема продаж по категориях.
Анализ валовой прибылиДинамика роста валовой прибыли за месяц и анализ маржи валовой прибыли.

images/1680485429170354.gif

3.2 Текстовые компоненты

На данном этапе отчет о продажах уже практически сформирован. Мы хотим добавить заголовок "Отчет о продажах сети супермаркетов XX". Мы можем сделать это, нажав "Другое > Текстовый компонент".

Если нам нужны внешние ссылки в качестве вспомогательных инструкций, мы можем нажать на текстовое поле.Добавьте гиперссылку (например, www.finebi.com), введите соответствующую информацию ( например, нажмите, чтобы перейти на официальный сайт супермаркета), затем успешно вставьте гиперссылку и отрегулируйте размер позиции текста.

images/1680485444883658.gif

3.3 Улучшение дашборда

После созданияь дашборда можно внести коррективы в общий стиль.

images/1680485470989710.gif

3.3.1 Стиль дашборда

Нажмите "Стиль дашборда", чтобы войти в интерфейс и выбрать нужный стиль. Если вы чувствуете, что вам все еще нужно настроить изменения, вы можете выбрать "Кастомный", чтобы установить его в соответствии с вашими собственными предпочтениями.

Стиль компонента Tab также может быть изменен в соответствии с вашими потребностями. Для настройки выберите "Компонент Tab > Dropdown > Style Settings". Как показано на рисунке ниже:

images/1680485483108951.gif

Мы можем настроить цвета заголовков, форматирование числовых единиц, размеры компонентов и т. д., чтобы продолжить украшать дашборд.

3.4 Предварительный просмотр эффектов

После настройки готового дашборда нажмите кнопку "Предварительный просмотр" в правом верхнем углу, чтобы перейти в интерфейс предварительного просмотра дашборда для просмотра всех результатов расчета данных. Как показано на рисунке ниже:

images/1680485504643310.gif

Примечание: Если вы хотите, чтобы дашборд по умолчанию отфильтровывал данные за январь 2020 года, просто выполните фильтрацию на экране редактирования дашборда, а затем перейдите к экрану предварительного просмотра.

images/1680485527113394.gif

4. Заключение курса

Поздравляем! На данный момент вы выполнили все этапы анализа и справились с заданием менеджера отдела в [Вводном примере по аналитике ], чтобы получить результаты анализа. Полагаю, вы освоили большинство наиболее часто используемых функций FineBI.