Предисловие: В эпоху больших данных спрос на визуализацию данных на больших экранах растет день ото дня, и большие экраны данных становятся все более и более формой отображения производительности предприятия, отображения отчетов, бизнес-мониторинга и т. д. Запуск больших экранов обеспечивает удобство, без кодирования, пользователи могут напрямую перетаскивать компоненты, которые будут представлены на холсте, а затем настраивать и размещать по своему желанию, что вы видите и что вы получаете. Некоторое время назад мы запустили бета-версию собственной визуализации данных на большом экране.
1 Предварительное исследование
Различные поставщики облачных услуг также запустили свои собственные комплексные решения для больших экранов данных, такие как datav от Alibaba Cloud, Tencent Cloud Map от Tencent Cloud, NetEase Youshu от NetEase и Sugar от Baidu. Все они запустили свои собственные решения для визуализации после расширения своих собственных продуктов. . , у вас могут быть сомнения🤔, у других есть зрелые решения, зачем нам строить свои колеса? С одной стороны, рассматриваются различные бизнес-сценарии, хотя поставщики услуг предоставили пользователям на выбор множество шаблонов с большим экраном для бизнес-сценариев, за которыми следует высокая стоимость развертывания приватизации и т. д.
1.1 Объекты исследования
ПредыдущийО насПорекомендуйте несколько инструментов для разработки экранной визуализации больших данныхУпоминается, что в настоящее время в Китае есть отличные поставщики решений для больших экранов данных.
- Облако Alibaba (DataV)🔗
- Облако Tencent (облако Tencent (DataV)🔗
- У NetEase есть номер (EasyScreen)🔗
- Умное облако Baidu (сахар)🔗
Если вам интересно узнать о текущем предложении, вот предложение от Baidu Sugar.
1.2 Функциональный анализ
После исследования и переживания решений, упомянутых выше, я разобрал функцию большого экрана данных, и примерно отсортирован функции, необходимые для простого визуального редактирования экрана большого данных, включая следующие
1.3 Существующие решения для визуального редактирования в сообществах с открытым исходным кодом
Панель инструментов экрана больших данных по сути такая же, как и логика визуального редактирования онлайн-страниц, таких как H5 и Web.По сути, это все еще перетаскивание, управление элементами управления, холст, управление свойствами компонентов, предварительный просмотр и т. д., но большой экран данных подчеркивает больше данных.Визуализация, уделяя особое внимание рендерингу диаграмм с помощью данных, ниже приведены некоторые решения для визуального редактирования от сообщества с открытым исходным кодом, и нуждающаяся детская обувь может ссылаться на них для справки.
2. Развитие
В предыдущем разделе мы разобрали функциональные модули экрана больших данных, которые в основном разделены на область управления, область холста, область настройки свойств управления, управление областью слоя и другие модули.Из-за внутренней конфиденциальности я буду использовать NetEase. как число. Обратитесь к дисплею, приблизительные модули следующие
2.1 Зона управления
Область управления включает в себя отображение элементов управления на большом экране, регистрацию и инициализацию компонентов управления, а элементы управления поддерживают перетаскивание на холст.Ниже представлена интерактивная демонстрационная схема области управления👇
2.1.1 Выбор библиотеки карт
В ходе расследования мы ссылались на визуальную конструкцию Любана h5 и обнаружили, что Любань использовалechartВ качестве библиотеки диаграмм рендеринга для элементов управления диаграммами вы можете увидетьСвязь
И наш выбор в библиотеке диаграмм - использовать антв Ant Financial.G2Plot🔗, и AntV также запустили онлайн-инструмент для создания диаграмм AntV на основе G2Plot.chartCube🔗, вы можете продемонстрировать и предварительно просмотреть эффект рендеринга различных данных диаграммы онлайн.
Другие элементы управления, такие как текстовые поля, изображения, таймеры и т. Д., Настраиваются индивидуально. Если вы хотите увидеть исходный код детской обуви, вы можете обратиться к Luban h5.плагины🔗
2.1.2 Регистрация и инициализация компонентов
Например, чтобы зарегистрировать текстовый элемент управления, вы можете сказать, что я могу настроить его один за другим, как показано ниже👇Но таким образом, если позже будет поддерживаться больше элементов управления, будет много избыточного кода при оценке и рендеринге компонентов на холсте в соответствии с их типом.В настоящее время мы можем использовать vue
isСвойства динамически отображают действия компонента следующим образом.
2.1.3 О перетаскивании на холст
Что касается перетаскивания элементов управления, использованиеvuedraggable ссылка 🔗, который основан наSortable.jsРеализованный плагин vue drag and drop реализован следующим образом.
🌲 Дальнейшее чтение
2.2 Модуль холста
Холст используется для размещения элементов управления, как ограничение области для перетаскивания и растягивания элементов управления. Модуль холста устанавливает фоновое изображение или настройку цвета фона, расположение элементов управления, настройку соотношения холста, адаптивный холст, полноэкранный режим и так далее.
2.2.1 Адаптивный холст
✏️ Режим редактирования
Когда мы растягиваем и изменяем размер окна браузера, мы слушаемonresizeсобытие, событие onresize произойдет при изменении размера окна или фрейма.Как правило, масштаб холста в основном устанавливается на16:9или4:3Большинство из двух соотношений, давайте посмотрим на эффект ниже
Холст в режиме редактирования, мы берем в качестве примера соотношение 16:9 и вычисляем его, обновляя ширину области холста, но этот эффект нехороший.
ps: Судим, находится ли он в полноэкранном режиме отображения, а если нет, то оставляем часть пустой области для вида холста
📺 Режим предварительного просмотра
В режиме редактирования мы разрешаем появление полос прокрутки, но панель инструментов в режиме предварительного просмотра используется для отображения, а полосы прокрутки обычно не разрешены. Как мы реализуем этот сценарий?Мой идеальный эффект заключается в том, что независимо от того, как изменится окно, наш контент сохранит исходные пропорции и попытается максимально заполнить окно.
Я имею в виду эту схему:Адаптивная схема адаптации полноэкранных страниц на больших экранах
2.2.2 Полноэкранный режим
Последней формой отображения экрана больших данных является полноэкранное отображение, при котором, по существу, отображается только область холста и скрываются все области редактирования и области конфигурации.isEditУправление отображением других областей, кроме холста
- Как отслеживать полноэкранные события
слушаяfullscreenchangeсобытие, размер представления холста пересчитывается при выходе из полноэкранного режима
PS: из соображений безопасности полноэкранный режим может запускаться только из событий, управляемых пользователем, а не напрямую с помощью кода, и будет сообщено об ошибке.
2.2.3 Снимок большого экрана
Мы хотим сгенерировать картинку для большого экрана, а снимок сгенерирован с помощьюdomtoimage🔗, вы можете конвертировать код в изображения, а также подобные инструментыhtml2canvas, в сравнении, domtoimage лучше с точки зрения качества изображения и расширения.Ниже приведено конкретное использование
2.2.4 Размер элемента управления перетаскиванием
Как мы упоминали в предыдущем разделе, холст фактически состоит из перетаскивания в области управления.В холсте есть настраиваемые элементы управления, и эти элементы управления должны быть настраиваемыми для перетаскивания.
vue-draggable-resizable🔗, а затем внести некоторые коррективы на его основе, конечно, вы также можете сделать свои собственные колеса.
Использование заключается в следующем👇, включая использование некоторых из этих API
-
draggable: используется для определения того, находится ли он в режиме редактирования, элементы управления режимом редактирования нельзя перемещать. -
dragstop: Перетаскивание элементов управления завершено. В настоящее время информация о положении элементов управления на холсте изменилась. В настоящее время ее необходимо синхронизировать с данными правой панели инструментов для обновления данных формы инструмента. -
resizstop: После завершения масштабирования сделать запрос интерфейса на обновление данных -
delete: Мы добавили на исходной основе vue-draggable-resizablekeyEventСобытие используется для оценки события удаления клавиатуры. -
activated: отслеживание элементов управления кликами для обработки выбора
2.2.5 Холст Масштаб
Элемент управления поддерживает масштабирование, и холст также должен поддерживать масштабирование.Мы определяем масштаб, которым можно манипулировать для изменения значения масштабирования, а затем изменяем свойства холста, вычисляя стиль масштабирования.
3.1 Область настройки управления
Область конфигурации элемента управления разделена на два модуля. Один модуль используется для управления свойствами элементов управления на холсте, включая основные свойства, такие как высота, ширина, размер, размер шрифта, тип шрифта и т. д. Как и другие элементы управления, текст имеет выравнивание, изображение и т. д. Есть модули загрузки изображений, режимы заполнения, часы с параметрами формата времени и т. д., которые здесь не перечислены. Это по сути конфигурация динамичных форм.Заинтересовавшиеся детской обувью могут посмотреть предыдущие«Эти вещи на переднем крае» развивают динамические формы от 0 до 1., а затем управление данными
3.1.1 Управление данными
Обычно наше управление данными используется для настройки данных элементов управления, таких как диаграммы, обычно поддерживает статические данные json, импорт данных таблицы csv и динамическую настройку интерфейса API.
В следующем выпуске я расскажу вам о том, как реализовано управление данными, как управляются слои и о некоторых впечатлениях от использования.
🌲Предыдущие статьи Соуса:
- Построение интерфейсной системы знаний Шуцзяна (часть 1)
- Построение внешней системы знаний Шуцзяна (ниже)
- Расскажите об инструментах ежедневной совместной работы для фронтенд-разработки
- Конфигурацию Babel тупо не могу понять
- Как лучше управлять интерфейсом API
- Что интервьюер спросил вас об узле
- передовой инжиниринг
- Вы изучили BFF и Serverless?
- Развертывание интерфейсной эксплуатации и обслуживания
Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~
1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация
2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.
3. Статья попала в Github frontendThings благодаря Star✨