❝Frontier: В последнее время возникла необходимость начать контактировать с развитием визуализации данных.На раннем этапе я исследовал и испытал несколько относительно крупных поставщиков решений для визуализации данных в Китае, а также проверил некоторые инструменты, которые будут задействованы в разработке. партнеры дали отзывы о соответствующих потребностях, поэтому я воспользовался этой возможностью, чтобы поделиться некоторыми инструментами, которые я собрал, и после завершения разработки я поделюсь опытом и опытом всего процесса.
❞
1. Предварительное исследование
❝Перед разработкой, вероятно, обратитесь к существующим отечественным поставщикам решений для больших экранов с отличными данными, как показано ниже👇
❞
- Облако Али (DataV)Ссылка на документацию
- У NetEase есть номер (EasyScreen)Ссылка на документацию
- Облако Tencent (карта облака Tencent)Ссылка на документацию
❝Однако все эти производители являются платными версиями.Только у Alibaba Cloud и NetEase есть 15-дневная бесплатная пробная версия.
❞
2. Функциональная анатомия
Путем предварительных исследований мы примерно разобрали функции, необходимые для простого редактирования визуализации данных на большом экране, включая следующие пункты:
3. Рекомендации по инструменту
❝После функционального разбора разберите задействованные функциональные модули.Различные модули включают в себя такие функции, как диаграммы, перетаскивание, растягивание и сжатие, редактор кода, экспорт изображений, макет сетки, динамические формы и т. д. , Задействованные функциональные модули не могут быть разработаны независимо друг от друга.Эти проблемы можно решить с помощью существующих в сообществе зрелых инструментов с открытым исходным кодом, чтобы избежать повторного создания колес.
❞
3.1 Antv
❝Официальное введение:
❞AntVЭто решение для визуализации данных нового поколения для Ant Financial, предназначенное для предоставления набора простых, удобных, профессиональных и надежных передовых методов визуализации данных с неограниченными возможностями.Ссылка на официальный сайтПри разработке больших экранов данных его можно использовать для визуализации областей управления компонентами, таких как круговые диаграммы, кольцевые диаграммы и т. д.
У Antv много продуктовых линеек, я в основном используюG2PlotИз библиотеки Charting Box, простота в использовании, а муравьев золотое платье домаChartCubeКубик Рубика диаграммы также используетG2Plot, в основном используют Antv, чтобы делать картинки онлайн и быстро генерировать кодОфициальная ссылка ChartCube
3.2 Codemirror
❝❞
CodemirrorЭто онлайн-редактор кода, который может выделять онлайн-код в режиме реального времени, и многие онлайн-редакторы кода, популярные в сообществе, также разработаны на основе Codemirror.При разработке больших экранов данных его можно использовать для управления источниками данных. и поддержка онлайн-редактирования кода.Ссылка на официальный сайт
Есть также разработчики, которые инкапсулировали версии vue и react на оригинальной основе.
-
vue-codemirror:Ссылка на документацию -
react-codemirror:Ссылка на документацию
Если вы настраиваете источник данных json, вы также можете использовать
-
jsoneditor:Ссылка на документацию
3.3 Vue.Draggable(Sortable.js)
❝Официальное введение:
❞Vue.Draggable— это компонент перетаскивания Vue, основанный на Sortable.js. Он позволяет выполнять синхронизацию перетаскивания и просмотра на основе и предоставляет все функции Sortable.js.При разработке больших экранов данных его можно использовать для выполнения функций перетаскивания элементов управления и перетаскивания различных элементов управления на холст, чтобы сформировать большой экран.Ссылка на документацию
Если вы не хотите использовать библиотеку инструментов, вы также можете прямо в H5Dragа такжеDropРазработано на основе API, установите для атрибута draggable значение true непосредственно на перетаскиваемом элементе.Ссылка на документацию
3.4 vue-draggable-resizable
❝❞
vue-draggable-resizableКомпоненты используются для изменяемых размеров и перетаскиваемых элементов без зависимостей от сторонних библиотек. При разработке больших экранов данных его можно использовать для настройки размера компонентов на холсте.Ссылка на документацию
3.5 vue-grid-layout
❝Официальное введение:
❞vue-grid-layout— это система компоновки сетки, похожая на Gridster для Vue.js. Вдохновленный React-Grid-Layout, это просто компонент перетаскивания сетки Vue, используемый для реализации перетаскиваемого макета Vue. При разработке больших экранов данных его можно использовать для компоновки компонентов на холсте.Ссылка на документацию
3.6 html2canvas
❝❞
html2canvasОн может легко помочь вам преобразовать код HTML в Canvas.При разработке данных для большого экрана его можно использовать для создания изображений для большого экрана и обмена данными посредством создания статического изображения.Ссылка на документацию
3.7 vcolorpicker
❝❞
vcolorpickerЭто компонент выбора цвета vue, который разработан после плагина выбора цвета Angular, При разработке больших экранов данных его можно использовать для выбора цвета, такого как цвет фона.Ссылка на документацию
Однако по-прежнему рекомендуется использовать селектор цвета сторонней библиотеки компонентов, например библиотеки компонентов элементов.ColorPicker, пользовательский опыт лучше
3.8 vue-form-maker
❝❞
vue-form-makerЭто Vue, который динамически генерирует компоненты формы, которые могут настраивать форму в соответствии с данными, но используемая библиотека пользовательского интерфейса — это iView, конечно, вы можете изменить ее в соответствии с используемой библиотекой компонентов. При разработке больших экранов данных его можно использовать для динамической генерации форм, таких как базовые атрибуты области компонента.Ссылка на документацию
Вы также можете обратиться к предыдущему соусу 🌲Разработка динамических форм от 0 до 1
4. Статья «Пасхальные яйца»
Только что присоединился к Наггетсlv4В то время некоторые друзья дразнили Шуцзяна и говорили: «Младший Шуцзян, ты хочешь «женскую одежду»» (Ах, посмотри, какой у тебя хороший ритм), Шуцзян, я, 180-летний сильный мужчина, позорный. Да, не оскверняйте чистую землю общины. Так что я перешел на более цивилизованную форму Шу Цзянцзюнь всегда очень любил музыку, и обычно пение🎤 тоже неотъемлемое удовольствие в моей жизни, песня Джей Чоу"Я так считаю"(Веб-версия Quick Hand) Дайте вам маленького партнера
🌲Предыдущие статьи Соуса:
- Построение интерфейсной системы знаний Шуцзяна (часть 1)
- Построение внешней системы знаний Шуцзяна (ниже)
- Расскажите об инструментах ежедневной совместной работы для фронтенд-разработки
- Конфигурацию Babel тупо не могу понять
- Как лучше управлять интерфейсом API
- Что интервьюер спросил вас об узле
- передовой инжиниринг
- Вы изучили BFF и Serverless?
- Развертывание интерфейсной эксплуатации и обслуживания
Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~
1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация
2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.
3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨