Автор: vivo Internet Big Data Team-Ван Лэй
В течение долгого времени многие продуктовые платформы пытались снизить порог разработки приложений с графическим интерфейсом и повысить эффективность производства за счет визуального построения. С развитием нашего бизнеса и улучшением построения данных требования пользователей к визуализации данных также растут с каждым днем. Экран больших данных является одним из методов визуализации данных. Он является своего рода средством отображения больших данных. широко используется на различных выставках, выставочных залах компаний, пресс-конференциях и т. д.
По сравнению с традиционными диаграммами и панелями данных, настраиваемыми вручную, появление универсальных строительных платформ с большим экраном может решить такие проблемы, как индивидуальная разработка и разработка приложений, а также высокие затраты на обслуживание данных, вызванные рассредоточением данных, посредством сбора, очистки и анализа данных. Интуитивный, интуитивно понятный и в режиме реального времени. Дисплей визуализации данных может отображать различные индикаторы в разных направлениях, под разными углами и в панорамном виде, а также контролировать его в режиме реального времени, чтобы сразу увидеть динамику.
В этой статье будут объяснены общие идеи дизайна общей платформы визуализации через план реализации общих возможностей создания больших экранов гибкой платформы BI.
С технического уровня наиболее интуитивно понятным является интерфейсной фреймворк визуализации: Echart, Antv, Chart.js, D3.js, Vega и т. д. Эти библиотеки могут помочь нам быстро преобразовать данные в различные формы визуальных диаграмм.
отбизнес-уровеньДавайте поговорим, Его важнейшее значение – пройтиданные -> комбинация графиков -> Страница визуализацииЭтот бизнес-процесс,Помочь пользователям более интуитивно и всесторонне анализировать тенденции и закономерности различных отраслей и сценариев.
Поэтому в области данных для сложных, труднопонятных и больших объемов данных информативность диаграмм гораздо выше, что также является наиболее фундаментальной целью визуализации данных.
В основном он состоит из визуальных компонентов + взаимодействия событий + координатных связей. Эффект показан на рисунке ниже:
Студенты часто спрашивают,Визуализируйте большой экран иBIдоска отчетовразницачто такое?
Вот краткое введение:
На рисунке ниже показана общая архитектура нашей платформы:
Вся платформа для создания больших экранов содержит четыре очень важные подсистемы и модули:
С помощью упомянутых выше компонентов большого экрана мы можем проанализировать и обобщить основной процесс создания большого экрана, как показано на рисунке ниже:
Далее мы поочередно разберем реализацию нескольких основных функций платформы:
1. Адаптивная верстка большого экрана.
фон:Решить проблему путаницы страниц,Обеспечьте адаптацию к большому экрану с несколькими разрешениями:
думать:Прежде всего, мы думаем о том, что мобильный терминал адаптируется к основной тенденции. Как совместить vh, vw, rem и font.js+rem Подождите два варианта. Первое решение в основном использует медиа-запросы для определения родительского размера, а затем использует rem в качестве единицы высоты, поля, заполнения и других свойств CSS компонента, наследуя родительские настройки и другие единицы (1vw) для достижения адаптивной адаптации. Второй вариант — сослаться на сторонний скрипт, написать вычисления кода в main.js и использовать rem для наследования для достижения адаптации.
① комбинация vh, vw, rem
//vw вх блок Официальное объяснение от w3c vw:1% of viewport’s width vh:1% of viewport’s height
//Например, если ширина черновика дизайна составляет 1920 пикселей, то 1vw=19,2 пикселей. Для облегчения расчета мы устанавливаем размер шрифта элемента html равным 100 пикселей, что составляет 5,208vw=100 пикселей.
body,html {
font-size:5.208vw
}
② font.js + rem
//Прослушиваем событие превышения размера окна,Динамический расчет размера шрифта корневого узла,Сотрудничать сноваremСделать адаптацию
(функция (док, победа) {
const docEl = doc.documentElement
const resizeEvt = «изменение ориентации» в окне? 'orientationchange': 'изменить размер'
константный пересчет = функция() {
пусть clientWidth = docEl.clientWidth
если (!clientWidth) вернуть
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
}
if (!doc.addEventListener) возвращает
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(документ, окно)
дефект:Когда мы используем сторонние плагины на больших экранах,В его стиле в качестве единицы измерения используется px.,Например line-height В настоящее время высота строки не может быть изменена, и могут возникнуть проблемы с путаницей, такие как перекрытие. Или мы используем postcss-px2rem Плагины выполняют глобальную замену, но при использовании нужно обращать внимание на адаптированные плагины, такие как Ant Дизайн, иначе представленный и т.д. При использовании элементов управления возникнут проблемы со стилем.
Решение:Усыновленныйcss3 увеличения transform: scale(X,Y) Свойства, в основном путем мониторинга окна браузера onresize событие,При изменении размера окна,Нам нужно использовать только фактическую ширину и высоту контейнера большого экрана.,Чтобы рассчитать соответствующий коэффициент увеличения и уменьшения,Это позволяет адаптировать макет,Мы также предоставляем различные эффекты адаптации макета.,Например, одинаковое масштабирование по высоте, одинаковое масштабирование по ширине, полноэкранное покрытие и т. д.,Различные способы увеличения,Определяет наш приоритет при вычислении соотношения сторон. Поэтому функцию уменьшения холста мы выполним позже.,Это решение также может быть реализовано напрямую.
// Размер эскиза проекта в зависимости от настроек Преобразуйте соответствующее соотношение сторон
useEffect(() => {
const wR = boxSize.width / viewWidth;
const hR = boxSize.height / viewHeight;
setBgScaleRatio(wR);
setBgHeightScaleRatio(hR);
}, [boxSize, viewWidth, viewHeight]);
//В соответствии с различными коэффициентами увеличения, такими как равная ширина, равная высота, полноэкранный режим и т. д. Рассчитать значение шкалы
const getScale = (proportion, x, y) => {
if (proportion === 'radioWidth') {
return `scaleX(${x})`
}
if (proportion === 'radioHeight') {
return `scaleY(${y})`
}
return `scale(${x}, ${y})`
}
2. Разработка общего процесса разработки компонентов большого экрана.
фон:вместе с Визуальные компонентыувеличение、Процесс добавления новых компонентов громоздкий и длительный.,Во избежание повторного переосмысления и последующего внедрения сторонних компонентов,Необходимо разработать общий процесс разработки компонентов:
Идеи дизайна:компоненты = component Тело компонента + schema Уровень протокола конфигурации компонентов + Слой определения компонента (тип, принадлежность, начальная ширина и высота и т. д.)
① component Тело компонента:
// initialization echarts
const renderNewEcharts = () => {
// 1. new echarts instance
const echartObj = updateEChartsOption();
// 2. bind events
bindEvents(echartObj, onEvents || {});
// 3. on chart ready
if (typeof onChartReady === 'function') onChartReady(echartObj);
// 4. on resize
echartObj.resize();
};
// bind the events
const bindEvents = (instance, events) => {
const _bindEvent = (eventName, func) => {
instance.on(eventName, (param) => {
func(param, instance);
});
};
// loop and bind
for (const eventName in events) {
if (Object.prototype.hasOwnProperty.call(events, eventName)) {
_bindEvent(eventName, events[eventName]);
}
}
};
// dispose echarts and clear size-sensor
const dispose = () => {
if ($chartEl.current) {
clear($chartEl.current);
// dispose echarts instance
(echartsLib || echarts).dispose($chartEl.current);
}
};
const DataV: React.FC<DataVProps> = (props) => {
const { config } = props;
const [renderCounter, setRenderCounter] = useState(0);
const $dataVWarpEl = useRef(null);
const $componentEl = useRef(null);
useEffect(() => {
// Мониторинг размера контейнера привязки
const resizefunc = debounce(() => {
$componentEl.resize();
}, 500)
// fixme
addResizeListener($dataVWarpEl.current, resizefunc);
return () => {
// Очистить подписку
removeResizeListener($dataVWarpEl.current, resizefunc);
};
}, []);
return (
<DataVWarp ref={$dataVWarpEl}>
<CompRender config={config} ref={$componentEl} />
</DataVWarp>
);
};
② schema Уровень протокола конфигурации компонентов + Слой определения компонента (тип, принадлежность, начальная ширина и высота и т. д.)
Мы настроили набор компонентов схемы DSL и уровня структурного протокола. Протокол конфигурации компонента согласовывается через DSL, включая редактируемые свойства компонента, тип редактирования, начальное значение и т. д. Причина, по которой определяется согласованный уровень протокола, заключается главным образом в том, чтобы облегчить последующее расширение компонента и позднее перенести конфигурацию.
{
headerGroupName: «Публичная конфигурация», //Настраиваем тип
headerGroupKey: 'widget', //Настраиваем типзначение ключа Одни и те же ключевые значения относятся к одной и той же категории.
name: 'название заголовка', //имя свойства
valueType: ['string'], //Тип значения атрибута
optionLabels: [], //Имя метки раскрывающегося списка службы, поля множественного выбора и других элементов управления
optionValues: [], //Значения служебных меток для раскрывающихся списков, полей с множественным выбором и других элементов управления
tip: false, //Элементы конфигурации Tooltip аннотация
ui: ['input'], //Используемый тип управления
class: false, //Имя класса управления, индивидуальный стиль управления
css: { width: '50%'}, //Изменяем стиль управления
dependencies: ['widget,title.show,true'], //Связь между атрибутами, правилами ['Тип конфигурации, ключ атрибута, значение атрибута']
depContext: DepCommonShowState, //Метод обратного вызова проверки между атрибутами
compShow: ['line'], //Какие компоненты настраиваются
dataV: { key: 'title.text', value: '' }, //Настроенное значение ключа и значение по умолчанию
},
доход:Вышеупомянутое настроено намиDSLУровень протокола структуры,Пользователям нужно только заполнить форму Excel,Вы можете создавать динамические формы,Реализуйте такие функции, как классификация элементов конфигурации компонентов, повторное использование конфигурации, связь между элементами конфигурации и аннотация атрибутов. В настоящее время конфигуратор свойств поддерживает 15 часто используемых элементов управления конфигурацией пользовательского интерфейса.,Через настраиваемый уровень протокола структуры DSL,Можно быстро завершить инициализацию интерфейса конфигурации компонента.,Подготовьтесь к последующим запланированным центрам материалов компонентов.
3. Перетащите агрегат
фон:React-Grid-Layout Плагин перетаскивания не поддерживает свободное размещение и перетаскивание компонентов на разных широтах:
Решение:Анализируя исходный код,Переписаны события перетаскивания на разных широтах и события перетаскивания целей.,Также были расширены такие функции, как блокировка соотношения сторон и вращение прозрачности.
Анализ исходного кода:
Функция масштабирования изменения размера была улучшена (оптимизирована). При перетаскивании помимо изменения ширины и высоты контейнера также динамически регулируется координатное положение компонента.
// CSS Transforms support (default)
if (useCSSTransforms) {
if (activeResize) {
const { width, height, handle } = activeResize;
const clonePos = { ...pos };
if (["w", "nw", "sw"].includes(handle)) {
clonePos.left -= clonePos.width - width;
}
if (["n", "nw", "ne"].includes(handle)) {
clonePos.top -= clonePos.height - height;
}
style = setTransform(clonePos, this.props.angle);
} else {
style = setTransform(pos, this.props.angle);
}
}
Сложенное отображение, свободный макет (оптимизация) путем контроля сжатия макета и динамической регулировки уровня zIndex цели перетаскивания для достижения взаимодействия при работе многоуровневых компонентов и свободного позиционирования.
// При каждом перетаскивании значение zIndex должно основываться на текущем максимальном значении zIndex. + 1 и возвращен компоненту для использования.
const getAfterMaxZIndex = useCallback(i => {
if (i === curDragItemI) {
return;
}
setCurDragItemI(i);
setMaxZIndex(maxZIndex => maxZIndex + 1);
return maxZIndex;
}, []);
Отображение эффекта после трансформации
4. Нажатие на статус на большом экране
фон:Дальнейшее обслуживание большого экрана требует выпуска версии, самостоятельного обновления и работы большого экрана в автономном режиме.,В настоящее время необходим механизм уведомления о сообщениях.,Управляйте рабочим состоянием большого экрана с помощью команд.
Решение:на основеwebsocketмеханизм связи,Создавайте длинные ссылки,Реализованы механизмы пульса и повторного подключения.,Обновления в режиме реального времени или автономное управление большими экранами после онлайн-выпуска.
В этой статье анализируется и объясняется, как спроектировать и разработать платформу для создания больших экранов с общими данными с помощью технических идей, таких как визуальное построение страниц, платформа без кода или с низким уровнем кода, динамическая форма схемы и т. д.
Текущая схема проектирования в основном соответствует основным требованиям по созданию возможностей для больших экранов данных. Если мы хотим реализовать строительную платформу с большим экраном, которая будет более выразительной и сможет удовлетворить больше сценариев, нам необходимо дополнительно улучшить масштабируемость платформы и улучшить общую экологию материалов. Конкретный план выглядит следующим образом: