Проектирование механизма визуализации большого экрана с нуля

внешний интерфейс визуализация данных
Проектирование механизма визуализации большого экрана с нуля

Статьи по Теме:Разработайте визуальную производственную платформу для большого экрана с нуля
Демонстрационный адрес:Визуальный редактор большого экрана V6
Примечание: ⚠️Эта статья является первой подписанной статьей сообщества Nuggets, и её перепечатка без разрешения запрещена.

Несколько месяцев назад я писал оРазработайте визуальную производственную платформу для большого экрана с нуляВ статье кратко описаны некоторые дизайнерские идеи и демонстрации эффектов платформы визуализации на большом экране.Как спроектировать визуальный большой экран для сборки движкаВ этом разделе подробно описан принцип реализации.

Согласно моему обычному стилю написания, я перечислю план статьи ниже, чтобы каждый мог читать и изучать выборочно и эффективно:

  • Ускорьте визуализацию данных
  • Как спроектировать общий строительный движок с большим экраном
  • Реализация основных функций движка построения большого экрана
    • реализация перетаскивания
    • Дизайн центра материалов
    • Реализация динамического рендерера
    • Настройка дизайна панели
    • Обзор Центра управления
    • Функциональный вспомогательный дизайн
  • Дальнейшее планирование и будущие перспективы визуального большого экрана

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

Ускорьте визуализацию данных

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

  • echart
  • antv
  • Chart.js
  • D3.js
  • Vega

Эти библиотеки могут помочь нам легко создавать визуальные диаграммы.

С практической точки зрения, его основное значение заключается в том, чтобы помочь пользователямУлучшенный анализ и представление данных. Поэтому, когда дело доходит до визуализации данных, речь идет скорее о работе с различными диаграммами посредствомДанные -> Портфель диаграмм -> Страница визуализацииЭтот бизнес-процесс и составляет тему, которую мы собираемся изучить сегодня.Визуализация дизайна большой экран строительный движок.

Как спроектировать общий строительный движок с большим экраном

сказал "двигатель«Слово может быть необъяснимо высоким. На самом деле, в интернет-технологиях мы часто слышим различные родственные существительные, такие как «движок браузерного рендеринга", "двигатель правил", "Механизм распознавания изображений"Подожди, я думаю"двигатель«Суть в том,Обеспечить надежный механизм для обеспечения непрерывной производительности системы. Итак, о чем мы говорим сегодня"Визуальный движок построения большого экрана», который, по сути, предоставляет набор механизмов построения, помогающих нам в разработке различных сложных страниц визуализации.

Для того, чтобы всем было проще понять визуальную конструкцию, я покажу здесь 2 страницы визуального большого экрана, чтобы разобрать с вами составляющие большого визуального экрана:

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

  • Набор визуальных компонентов
  • Пространственные координатные отношения

Поскольку наш визуальный носитель для большого экрана — это страница, онаhtml, так что есть еще одна особенность:События/взаимодействия. Подводя итог, мы суммировали необходимые элементы для визуализации большого экрана:

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

Далее я возьму вас в разборку и реализую вышеуказанный строительный двигатель.

Реализация основных функций движка построения большого экрана

Как говорится: "Хорошая разборка - полдела",Любую сложную задачу или систему, пока мы можем разобрать ее на множество мелких подмодулей, мы можем ее хорошо решить и реализовать, (Обучение также)

Далее мы будем решать несколько основных подмодулей вышеуказанного базового движка один за другим:

  • реализация перетаскивания
  • Дизайн центра материалов
  • Реализация динамического рендерера
  • Настройка дизайна панели
  • Обзор Центра управления
  • Функциональный вспомогательный дизайн

реализация перетаскивания

Перетаскиватель является основным модулем механизма визуального построения, и он также используется для решения вышеупомянутых «функций страницы большого экрана».Отношение пространственных координат«Эта проблема. Давайте сначала посмотрим на эффект от реализации:

Для технической реализации перетаскивания мы можем использовать роднойjsДля реализации вы также можете использовать стороннюю зрелую библиотеку перетаскивания, например:

  • DnD
  • React-Dragable
  • react-moveable

Я также открыл исходный код легкой бесплатной библиотеки перетаскивания, прежде чемrc-drag, эффект следующий:

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

Базовый код прототипа для нашего перетаскивателя выглядит следующим образом:

export default function DragBox(props) {
    const [x, y, config] = props;
    const [target, setTarget] = React.useState();
    const [elementGuidelines， setElementGuidelines] = React.useState([]);
    const [frame, setFrame] = React.useState({
        translate: [x, y],
    });
    React.useEffect(() => {
        setTarget(document.querySelector(".target")!);
    }, []);
    return <div className="container">
        <div className="target">拖拽内部组件， 比如图表/基础组件等</div>
        <Moveable
            target={target}
            elementGuidelines={elementGuidelines}
            snappable={true}
            snapThreshold={5}
            isDisplaySnapDigit={true}
            snapGap={true}
            snapElement={true}
            snapVertical={true}
            snapHorizontal={true}
            snapCenter={false}
            snapDigit={0}
            draggable={true}
            throttleDrag={0}
            startDragRotate={0}
            throttleDragRotate={0}
            zoom={1}
            origin={true}
            padding={{"left":0,"top":0,"right":0,"bottom":0}}
            onDragStart={e => {
                e.set(frame.translate);
                // 自定义的拖拽开始逻辑
            }}
            onDrag={e => {
                frame.translate = e.beforeTranslate;
                e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`;
                // 自定义的拖拽结束逻辑
            }}
        />
    </div>;
}

Вышеупомянутое предназначено только для реализации основной функции перетаскивания, нам нужно сохранить информацию о положении перетаскивания, чтобы реализовать «Что вы берете, то и получаете". Информация о местоположении будет храниться вDSLВ данных этот блок будет подробно описан в следующем содержании.

Для дальнейшего углубленного перетаскивания мы также можем установить контрольные линии, линии выравнивания, привязку и т. д., и их можно использовать в разные периоды перетаскивания (например,onDragStartа такжеonDragEnd)做不同的业务逻辑。 ЭтиMoveableВсе они обеспечивают соответствующую поддержку API, на которую вы можете ссылаться и использовать.

Дизайн центра материалов

Материальный центр в основном обеспечивает "сырье". Чтобы разработать надежные и общие материалы, нам необходимо разработать набор стандартных структур компонентов и протоколов атрибутов. А для облегчения управления материалами и запросов нам также необходимо классифицировать материалы, моя классификация выглядит следующим образом:

  • Визуальная составляющая(Бар диаграммы, круговые диаграммы, гистограммы, карты, визуализация)
  • Модифицированный компонент(картинки, карусели, отретушированные материалы и т.д.)
  • текстовый компонент(текст, выделение текста, текстовое поле)

Конкретная библиотека материалов демонстрируется следующим образом:

Здесь я беру реализацию визуального компонента для иллюстрации:

import React， { memo， useEffect } from 'react'
import { Chart } from '@antv/g2'

import { colors } from '@/components/BasicShop/common'

import { ChartConfigType } from './schema'

interface ChartComponentProps extends ChartConfigType {
  id: string
}

const ChartComponent: React.FC<ChartComponentProps> = ({
  id, data, width, height,
  toggle, legendPosition, legendLayout, legendShape,
  labelColor, axisColor, multiColor, tipEvent, titleEvent,
  dataType, apiAddress, apiMethod, apiData, refreshTime,
}) => {
  useEffect(() => {
    let timer:any = null;
    const chart = new Chart({
      container: `chart-${id}`,
      autoFit: true,
      width,
      height
    })

    // 数据过滤， 接入
    const dataX = data.map(item => ({ ...item, value: Number(item.value) }))
    chart.data(dataX)
    
    // 图表属性组装
    chart.legend(
      toggle
        ? {
          position: legendPosition,
          layout: legendLayout,
          marker: {
            symbol: legendShape
          },
        }
        : false,
    )

    chart.tooltip({
      showTitle: false,
      showMarkers: false,
    })

    // 其他图表信息源配置， 方法雷同， 此处省略
    // ...

    chart.render()

  }, [])

  return <div id={`chart-${id}`} />
}

export default memo(ChartComponent)

Выше приведена модель реализации наших основных материалов, и используются визуальные компоненты.g2, конечно, можно использовать и привычныйechart,D3.jsи т. д. Различные материалы имеют общиеprops, также имеет собственныйprops, в зависимости от того, как мы определяем материалSchema.

в дизайнеSchemaПрежде чем нам нужно будет определить разделение компонентов по атрибутам, чтобы обеспечить гибкость и универсальность конфигурации компонентов, я сделал следующие разделения:

  • Внешние свойства(ширина и высота компонента, цвет, метка, режим презентации и т. д.)
  • Конфигурация данных(статические данные, динамические данные)
  • События/взаимодействия(например, щелчок, прыжок и т. д.)

С помощью приведенного выше разделения мы можем легко спроектировать желаемый общийSchema. Давайте сначала посмотрим на реализованную панель конфигурации:

Эти элементы свойств основаны на нашем определенииschemaэлемент конфигурации, черезсинтаксический анализатординамически визуализируется, осинтаксический анализаторИ панель конфигурации, о которой я расскажу вам в следующих главах. Сначала рассмотрим компонентыschemaструктура:

const Chart: ChartSchema = {
  editAttrs: [
    {
      key: 'layerName',
      type: 'Text',
      cate: 'base'，
    },
    {
      key: 'y',
      type: 'Number',
      cate: 'base',
    },
    ...DataConfig, // 数据配置项
    ...eventConfig, // 事件配置项
    
  ]，
  config: {
    width: 200,
    height: 200,
    zIndex: 1,
    layerName: '柱状图',
    labelColor: 'rgba(188，200，212，1)',
    // ... 其他配置初始值
    multiColor: ['rgba(91, 143, 249, 1)', 'rgba(91, 143, 249, 1)', 'rgba(91, 143, 249，,1)', 'rgba(91, 143, 249, 1)'],
    data: [
      {
        name: 'A',
        value: 25,
      }，
      {
        name: 'B',
        value: 66,
      }
    ],
  },
}

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

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

Реализация динамического рендерера

Все мы знаем, что когда на странице много элементов, это влияет на общую скорость загрузки страницы, потому что браузеру нужно потреблятьCPU / GPU. Для визуальных страниц каждый визуальный компонент должен отображать большое количество информационных элементов, что, несомненно, окажет большое влияние на производительность страницы, поэтому нам необходимо разработать механизм, позволяющий загружать компоненты на холст асинхронно, а не единовременно. , Загружайте десятки сотен компонентов (в этом случае страница будет иметь много белого экранного времени, а пользовательский опыт будет крайне ухудшен).

Динамический загрузчик предоставляет такой механизм, чтобы загрузка компонентов была асинхронной: с одной стороны, можно уменьшить объем страницы, а с другой стороны, пользователь может увидеть элементы страницы раньше. В настоящее время существует множество механизмов динамической загрузки, с которыми мы знакомы.Vueа такжеReactЭкосистемы предоставляют готовые решения (хотя мы можем использоватьwebpackСпроектируйте такую ​​динамическую модель самостоятельно (чтобы повысить эффективность написания, мы напрямую инкапсулируем ее на основе готового решения). Давайте сначала посмотрим на процесс динамического рендеринга компонентов:

В приведенной выше демонстрации вы можете видеть, что после перетаскивания значка компонента из меню компонентов слева на холст начинается загрузка и рендеринг реального компонента.

Здесь мы беремumi3.0который предоставилdynamicфункция для минимальной реализации динамического рендерера. Если незнакомоumiДрузья-экологи, не волнуйтесь, прочитав мой процесс и принципы реализации, вы сможете использовать любой знакомый механизм динамической загрузки для его реализации. Реализация выглядит следующим образом:

import React, { useMemo, memo, FC } from 'react'
import { dynamic } from 'umi'

import LoadingComponent from '@/components/LoadingComponent'


const DynamicFunc = (cpName: string, category: string) => {
  return dynamic({
    async loader() {
      //  动态加载组件
      const { default: Graph } = await import(`@/components/materies/${cpName}`)

      return (props: DynamicType) => {
        const { config， id } = props
        return <Graph {...config} id={id} />
      }
    },
    loading: () => <LoadingComponent />
  })
}

const DynamicRenderEngine: FC<DynamicType> = memo((props) => {
  const { 
  type, 
  config, 
  // 其他配置... 
  } = props
  const Dynamic = useMemo(() => {
    return DynamicFunc(config)
  }, [config])

  return <Dynamic {...props} />
})

export default DynamicRenderEngine

Это очень просто?Конечно, мы также можем разработать более сложные и мощные динамические средства визуализации в соответствии с потребностями нашего бизнеса.

Настройка дизайна панели

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

Как видно из рисунка выше, основным элементом панели динамической конфигурации являетсявизуализатор формы. Цель рендерера формы — настроить список на основе свойствattrsдля динамического отображения соответствующего элемента формы. Ранее я написал статью, в которой подробно представил техническую реализацию конструктора форм, если вам интересно, вы также можете обратиться к:Визуализация дверей реализует конструктор динамических форм с нуля.

Здесь я просто реализую базовую модель рендерера формы:

const FormEditor = (props: FormEditorProps) => {
  const { attrs, defaultValue, onSave } = props;

  const onFinish = (values: Store) => {
    // 保存配置项数据
    onSave && onSave(values);
  };
  
  const handlechange = (value) => {
    // 更新逻辑
  }

  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      {...formItemLayout}
      onFinish={onFinish}
      initialValues={defaultValue}
      onValuesChange={handlechange}
    >
      {
        attrs.map((item, i) => {
        return (
          <React.Fragment key={i}>
            {item.type === 'Number' && (
              <Form.Item label={item.name} name={item.key}>
                <InputNumber />
              </Form.Item>
            )}
            {item.type === 'Text' && (
              <Form.Item label={item.name} name={item.key}>
                <Input placeholder={item.placeholder} />
              </Form.Item>
            )}
            {item.type === 'TextArea' && (
              <Form.Item label={item.name} name={item.key}>
                <TextArea rows={4} />
              </Form.Item>
            )}
            // 其他配置类型
          </React.Fragment>
        );
      })}
    </Form>
  );
};

Если вы хотите увидеть более полную реализацию панели конфигурации, вы можете обратиться к проекту с открытым исходным кодом.H5-Dooring | Визуальный редактор H5

Мы можем взглянуть на окончательный эффект реализации панели конфигурации:

Обзор центра управления и функциональный автоматизированный дизайн

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

Функциональный вспомогательный дизайнВ основном из-за некоторой оптимизации действий пользователя, таких как ярлыки, масштаб холста, ярлыки навигации на большом экране, отмена операции повтора, это может быть идеальным в соответствии с конкретными требованиями продукта. Вы также можете обратиться к пост-дизайну для достижения при создании продуктов.

Дальнейшее планирование и будущие перспективы визуального большого экрана

Чтобы реализовать визуальный движок для больших экранов, который является более выразительным и отвечает большему количеству сценариев, нам нужно улучшить масштабируемость движка, с одной стороны, и улучшить экологию материала, с другой стороны, Во-вторых, нам нужно только идти в ногу с время и предоставлять более интеллектуальные функции сцены, такие как настройка скрытых точек, раннее предупреждение о данных и т. д. Конкретный план выглядит следующим образом:

  • Богатые материалы компонентов, поддержка 3D-компонентов, геопространственных компонентов и т. д.
  • Создание скрытых точек для облегчения последующего анализа компонентов
  • Реализовать источник данных, замкнутый цикл механизма событий
  • Поддержка пользовательских компонентов

Если вы заинтересованы в визуализации или низком коде / нулевом коде, вы также можете обратиться к моей предыдущей статье или обменять свои идеи и опыт в области комментариев.

Прошлые статьи

Категории