Предыдущая статья продолжается, и книга продолжается:
Глаза открыты! Али использует такие компоненты для разработки больших экранов (1)
Глаза открыты! Али использует такие компоненты для разработки больших экранов (2)
Привет~ Я фронтенд-ученик Фэн (@Malpor), вы довольны покупками в Double Eleven? Сегодня я продолжу знакомить вас с нашей внешней библиотекой графиков с открытым исходным кодом 📈 CloudCharts (Github приглашает попробовать &Выпуск&PR) Как решить проблемы, возникающие в крупномасштабных сценариях использования на основе упаковки G2, и может рисовать диаграммы с несколькими элементами конфигурации, обслуживающими почти 200 внутренних продуктов и множество внешних облачных продуктов. Заинтересованные студенты могут зайти на официальный сайт, чтобы испытать онлайн:портал
Этот выпуск является последним в серии, отвечая на последние два вопроса:
Как совместить отображение темы диаграммы и быстро переключить тему?
Как строить диаграммы с низким кодом?
Что такое тема диаграммы?
CloudChartsЭто диаграмма, управляемая данными, и данные определяют ее содержимое. Система тем управляет внешним видом элементов диаграммы, не связанных с данными. Она не может изменить сенсорный характер диаграммы, но может сделать диаграмму более эстетичной и соответствовать требованиям общей визуальной согласованности.
Детали элемента управления темой включают стиль осей диаграммы, легенду, линии сетки и цветовое соответствие геометрических маркеров.
По умолчанию мы предоставляем две темы для светлых и темных сцен:
Как реализовать систему тем?
CloudChartsСистема тем в основном состоит из трех частей: пакета тем, менеджера тем и вызова компонентов:
1. Тематический пакет
Пакет темы представляет собой KV-карту, состоящую из нескольких значений переменных темы.Обычно дизайнер задает значения цвета, размера шрифта, интервала и т. д. для определенной сцены. Например, яркая тема и темная тема, предоставляемые по умолчанию, представляют собой два пакета тем. Что-то вроде этого:
{
"widgets-color-background": "#ffffff",
"widgets-color-blue": "#3f90ff",
"widgets-color-orange": "#fa8c15",
...
}
2. Менеджер тем
Менеджер отвечает за CUR (добавление, изменение и запрос, а не удаление здесь) пакета темы, а также за раскрытие интерфейса снаружи, что позволяет пользователям переключать темы и устанавливать пользовательские пакеты тем. В то же время компонент внутренней диаграммы может получить текущий пакет темы и отрисовать его.
// 获取主题包，不传名称则返回当前主题
function getTheme(name) { ... }
// 设置主题包，传入名称或主题包
function setTheme(nameOrTheme) { ... }
// 定义一个map，存储当前主题变量和 get/set 方法
const themes = {
// 接口方法
getTheme,
setTheme,
// 主题变量
...
};
// themes 直接导出，通过引用保证各组件间拿到的主题是一致的
export default themes;
3. Вызов компонента
В библиотеке диаграмм есть компоненты G2 и пользовательские компоненты React.Компоненты на основе G2 должны использовать переменные темы JS, а пользовательские компоненты React используют переменные темы CSS. Таким образом, есть два способа вызова: вызов JS и вызов CSS.
JS-вызов
В менеджере мы экспортируем объект темы, который может напрямую получить текущую переменную темы, и это очень просто вызвать в JS:
import themes from '../themes';
// 使用变量
const mainColor = themes['widgets-color-blue'];
CSS-вызов
Когда диаграмма будет инициализирована, мы преобразуем переменные темы в переменные CSS и вставим их в документ через тег стиля, чтобы переменные CSS пакета темы можно было напрямую использовать в CSS пользовательского компонента React:
// HTML 中插入
<style>
.cloud-charts {
--widgets-color-background: #ffffff;
--widgets-color-blue: #3f90ff;
--widgets-color-orange: #fa8c15;
...
}
</style>
// CSS 调用
.cloud-wcontainer {
background: var(--widgets-color-background);
padding: var(--widgets-container-padding);
...
}
Менеджер темы также динамически обновляет переменные CSS при вызове setTheme, чтобы обеспечить согласованность темы.
Благодаря этим трем частям наша тематическая система в основном завершена.
Улучшено — дизайнер тем
Наш пакет тем полагается на дизайнеров для предоставления визуальных решений.В прошлом дизайнеры должны были создавать эскизы дизайна, а внешний интерфейс корректировал переменные темы в соответствии с эскизами дизайна. Совместная корректировка между двумя сторонами занимает много времени и сил, было бы хорошо, если бы было только один или два сценария, но при все большем количестве сценариев развития бизнеса это было бы слишком неэффективно.
Итак, мы сделали небольшой инструмент «Конструктор тем»:
Дизайнеры могут настроить пакет темы диаграммы в режиме онлайн и динамически просматривать влияние пакета темы на различные компоненты. Инструменту также могут помочь алгоритмы автоматического добавления части цветовой палитры после изменения основного цвета, что снижает нагрузку на дизайнера. После того, как дизайн завершен, инструмент напрямую экспортирует пакет темы, который можно использовать во внешнем интерфейсе, упрощая весь процесс доставки дизайна и получая то, что вы видите.
Вы можете испытать это прямо на официальном сайте:Дизайнер тем
Графические решения с низким кодом
Упакованная библиотека диаграмм относительно проста в использовании, и ее можно быстро завершить, обратившись к примерам и документам. Но есть ли более простое решение, позволяющее настроить график без чтения документации?
Ответ да, то естьВизуальное редактирование.
С помощью конфигурации визуальной формы генерируются элементы конфигурации, необходимые для создания диаграммы. Разработчики могут настраивать диаграммы одним щелчком мыши и копировать их в свои проекты одним щелчком мыши. Это относительно простое решение с низким кодом.
Кроме того, библиотека диаграмм настраивается, и она также может легко получить доступ к различным более сложным системам построения с низким кодом. Например, мы экспортируем материалы в такие продукты, как Yida и DataV.
конечная разделительная линия
увеличиваяДизайнер темиВизуальное редактированиефункции, мы открыли восходящий и нисходящий поток диаграммы и улучшили визуальную связь «от дизайнеров к разработчикам и системам построения с низким кодом».
На этом мы завершаем нашу серию «Разработка больших экранов с помощью подобных компонентов». Если у вас есть какие-либо вопросы, пожалуйста, оставьте их в комментариях~ Если у вас есть какой-либо интересующий вас контент, вы также можете оставить комментарий, и мы продолжим делиться им в будущем~
📢 📢 Еще одна вещь, в план разработки добавлена беспокоящая многих версия Vue, конкретный прогресс вы можете увидеть в выпуске:портал
Не забудьте подписаться на нас~