За последние несколько лет визуализация данных прошла долгий путь. Разработчики ожидают, что продукты для визуализации больше не будут простыми инструментами для создания диаграмм, а предъявляют более высокие требования к взаимодействию, производительности и обработке данных.
Apache ECharts всегда стремился облегчить разработчикам создание гибких и богатых визуализаций. В последнем выпуске Apache ECharts 5 мы сосредоточились на расширении возможностей повествования диаграмм, что позволяет разработчикам более простым способом рассказать историю, стоящую за данными.
«Экспресс» является ядром Apache ECharts 5. Благодаря всестороннему обновлению пяти модулей и 15 функций, с упором на способность визуального выражения повествования, «таблица» диаграммы может лучше передать историю, стоящую за данными «Da», и помочь разработка Это упрощает пользователям создание визуализаций, отвечающих потребностям различных сценариев.
Apache ECharts 5 будет запущен онлайн в 20:00 28.01.2021. В это время многие PMC и коммиттеры Apache ECharts подробно расскажут о новых функциях ECharts 5, чтобы помочь вам быстро начать работу с Apache ECharts 5 с мощными возможностями повествования!
обращать вниманиеСтудия, поставь ⏰, чтобы учиться вместе!
Теперь давайте кратко рассмотрим новые функции Apache ECharts 5.
динамичное повествование
Важность анимации для человеческого познания невозможно переоценить. В предыдущих работах мы использовали анимацию инициализации и анимацию перехода, чтобы помочь пользователям понять связь между преобразованиями данных, делая внешний вид и преобразование диаграмм менее жесткими. На этот раз мы значительно расширили возможности анимационного повествования. Есть надежда, что помощь анимации для познания пользователей может быть использована и дальше, а функция динамического повествования диаграммы может помочь пользователям легче понять историю, стоящую за диаграммой.
Динамическая сортировочная диаграмма
В Apache ECharts 5 добавлена поддержка динамически сортируемых гистограмм (гистограммы) и динамически сортируемых линейных диаграмм (гонки линий), чтобы помочь разработчикам легко создавать диаграммы временных рядов для отображения изменений данных во временном измерении.Эволюция данных.
График динамического рейтинга показывает, как различные категории меняются в рейтинге с течением времени. Разработчикам нужно только включить такие эффекты в ECharts с помощью нескольких строк простых элементов конфигурации.
Анимация пользовательского сериала
Помимо динамических диаграмм сортировки, Apache ECharts 5 предоставляет более богатые и мощные анимационные эффекты в пользовательских сериях, поддерживает интерполяционную анимацию числового текста меток, а также переходы эффектов преобразования, разделения и объединения графики.
Представьте, какие потрясающие визуализации можно создать с помощью этих динамических эффектов!
визуальный дизайн
Роль визуального дизайна заключается не только в том, чтобы диаграммы выглядели лучше, но, что более важно, дизайн, соответствующий принципам визуализации, может помочь пользователям быстрее понять, что диаграммы хотят выразить, и устранить недоразумения, вызванные плохим дизайном. насколько это возможно.
Дизайн по умолчанию
Мы обнаружили, что большое количество разработчиков используют стандартные стили темы ECharts, поэтому очень важно создать стильный дизайн темы по умолчанию, соответствующий принципам визуализации. В Apache ECharts 5 мы переработали стили темы по умолчанию, а также оптимизировали и настроили их для различных серий и компонентов. На примере цвета темы мы учитываем такие факторы, как степень различения цветов, контрастность с фоновым цветом, гармонию соседних цветов и т. д., и следим за тем, чтобы люди с нарушениями цветового зрения также могли четко различать данные .
Давайте возьмем наиболее часто используемую гистограмму в качестве примера, чтобы увидеть стили новой версии светлой темы и темной темы:
Для интерактивных компонентов, таких как dataZoom и временная шкала, мы также разработали новый стиль и обеспечили лучший интерактивный опыт:
Этикетка
Метки являются одним из основных элементов диаграммы, а четкие и недвусмысленные метки могут помочь пользователям лучше понять данные. Apache ECharts 5 предоставляет множество новых возможностей маркировки, позволяя четко и точно отображать плотные метки.
Apache ECharts 5 позволяет автоматически скрывать перекрывающиеся метки с помощью элемента конфигурации. Для меток, выходящих за пределы отображаемой области, можно выбрать автоматическое усечение или перенос. Плотные метки круговых диаграмм теперь имеют более красивое автоматическое расположение.
Эти функции могут помочь избежать слишком плотного текста для удобочитаемости. Более того, он может действовать по умолчанию без написания разработчиком дополнительного кода, что значительно упрощает затраты разработчика на разработку.
Мы также предоставляем ряд элементов конфигурации, позволяющих разработчикам активно управлять стратегией размещения меток, например, перетаскиванием меток, общим отображением на краю холста, соединением с направляющими линиями и графическими элементами, а также связыванием и выделением для выражения отношение.
Новая функция вкладок позволяет вам иметь очень элегантное отображение вкладок в ограниченном пространстве, таком как мобильное устройство:
Лента новостей
Apache ECharts 5 предоставляет временную шкалу, удобную для отображения меток времени. Дизайн временной шкалы по умолчанию выделяет важную информацию и предоставляет более гибкие возможности настройки, позволяя разработчикам настраивать содержимое меток временной шкалы в соответствии с различными потребностями.
Прежде всего, ось времени больше не делится абсолютно поровну, как раньше, а для отображения выбираются более значимые точки, такие как год, месяц, день и час, и одновременно могут отображаться разные уровни шкалы. помеченformatterПоддерживаются шаблоны времени (например,{yyyy}-{MM}-{dd}) и может указывать разные метки для разной степени детализации времени.formatter, в сочетании с существующими метками форматированного текста, вы можете настроить привлекательные и разнообразные временные эффекты.
Отображение шкалы времени с разной степенью детализации dataZoom:
Подсказка
Подсказка — это один из наиболее часто используемых компонентов визуализации, который может помочь пользователям в интерактивном режиме понять детали данных. В Apache ECharts 5 мы оптимизировали стиль окна подсказки.Настроив стиль шрифта, цвет, добавив стрелки и следуя цвету границы графического цвета, отображение окна подсказки по умолчанию стало элегантным и четким. И логика рендеринга форматированного текста была улучшена, чтобы гарантировать, что эффект отображения соответствует HTML, что позволяет пользователям выбирать различные технические решения для достижения одного и того же эффекта в разных сценариях.
Кроме того, на этот раз мы также добавили функцию сортировки списка в окне подсказки в соответствии с числовым размером или порядком категорий.
панель приборов
Мы видим много классных диаграмм на панели инструментов, созданных пользователями сообщества, но то, как они их настраивают, часто бывает сложным и запутанным. Поэтому мы полностью обновили функции приборной панели, поддерживая указатели изображения или векторного пути, а также элементы конфигурации привязки, индикаторы выполнения, эффекты закругленных углов и другие элементы конфигурации.
Указатели панели инструментов в разных стилях:
Эти обновления не только позволяют разработчикам добиваться интересных эффектов с помощью более простых элементов конфигурации, но и предоставляют более широкие возможности настройки.
Зубчатые углы
Закругленные углы могут придать более красивое и мягкое видение, а также могут дать больше творчества. Apache ECharts 5 поддерживает закругленные углы для круговых диаграмм, диаграмм солнечных лучей и древовидных карт. Но не стоит недооценивать простой элемент конфигурации с закругленными углами и разумно сочетать другие эффекты, чтобы сформировать более персонализированную визуализацию.
Возможность взаимодействия
Интерактивная возможность визуализации работ помогает пользователям изучить и понять работу и углубить понимание основной идеи диаграммы.
государственное управление
В ECharts 4 есть два интерактивных состояния, выделенное и нормальное. Когда мышь перемещается по графику, она переходит в выделенное состояние, чтобы различать данные. Разработчики могут устанавливать цвета этих двух состояний отдельно, тени и т. д.
На этот раз в Apache ECharts 5, основанном на исходной подсветке при наведении мыши, мы добавили новыйисчезатьЭффект других несвязанных элементов, так что цель фокусировки целевых данных может быть достигнута.
как в этомГистограммаВ нашем примере, когда мышь находится над серией, другие несвязанные серии исчезают, тем самым более четко выделяя контраст данных в выбранной серии. На графах с более сложными структурами данных, таких как реляционные графы, древовидные графы, графы солнечных лучей, санки и т. д., также можно наблюдать связи между данными, затухая несвязанные элементы. А цвета, тени и т. д., которые можно задать в стиле выделения (выделения), теперь также можно установить в состоянии затухания (размытия).
В дополнение к этому для всех серий мы добавилиНажмите, чтобы выбратьЭто взаимодействие, которое раньше можно было включить только в нескольких сериях, таких как круговые диаграммы и карты, может быть установлено разработчиками в режиме одиночного или множественного выбора, аselectchangedСобытие получает всю выбранную графику для дальнейшей обработки. Так же, как выделение и затухание, выбранные стили также могут быть изменены.selectв конфигурации.
повышение производительности
рендеринг грязного прямоугольника
Apache ECharts 5 теперь поддерживает рендеринг грязных прямоугольников, чтобы устранить узкое место производительности в сценах только с локальными изменениями. При использовании модуля рендеринга Canvas метод рендеринга грязных прямоугольников обнаруживает и обновляет только ту часть представления, которая изменяется, а не любое изменение, вызывающее полную перерисовку холста. Это может помочь улучшить частоту кадров при рендеринге в некоторых особых сценариях, например, в сценах, где мышь часто вызывает выделение некоторых графических объектов при наличии большого количества графики. В прошлом для оптимизации производительности в таких сценах использовались дополнительные слои холста, но этот метод не является общим для всех сцен и не идеален для сложных стилей. Отрисовка грязного прямоугольника хороша как для производительности, так и для корректности отображения.
Наглядная демонстрация грязного прямоугольника, красная рамка — это область перерисовки рамки:
Вы можете увидеть этот эффект, включив оптимизацию грязного прямоугольника на новой странице примера.
Оптимизация производительности линейных диаграмм для данных временных рядов в реальном времени
Кроме того, производительность линейных диаграмм с большими объемами данных также была значительно улучшена. Мы часто сталкиваемся с необходимостью высокопроизводительного рендеринга большого объема данных временных рядов в реальном времени, которые, возможно, необходимо обновлять каждые несколько сотен или десятков миллисекунд.
Apache ECharts 5 глубоко оптимизирует потребление ЦП, использование памяти и время инициализации в этих сценариях, так что миллионы данных могут обновляться в режиме реального времени (каждое обновление занимает менее 30 мс), даже если десятки миллионов данных также могут быть отображены. в течение 1 с, сохраняя при этом небольшой объем памяти и плавное взаимодействие, такое как всплывающие подсказки.
опыт разработки
Мы надеемся, что такой мощный инструмент визуализации сможет использоваться большим количеством разработчиков более простым способом, поэтому опыт разработки разработчиков также является аспектом, который нас очень беспокоит.
набор данных
ECharts 5 расширяет возможности преобразования данных наборов данных, позволяя разработчикам простым способом реализовывать общую обработку данных, например: фильтрацию данных (фильтр), сортировку (сортировку), агрегирование (агрегирование), гистограмму (гистограмму), простую кластеризацию, регрессию. расчет линии (регрессия) и т. д. Разработчики могут использовать эти функции унифицированным декларативным способом и могут легко реализовывать общие операции с данными.
глобализация
Исходное решение интернационализации ECharts принимает форму упаковки различных файлов развертывания в соответствии с различными языковыми параметрами. Таким образом, динамический язык и пакет статического кода связаны друг с другом, и цель переключения языка может быть достигнута только путем перезагрузки кода ECharts для разных языковых версий.
Поэтому, начиная с Apache ECharts 5, пакеты динамического языка отделены от пакетов статического кода. При переключении языков вам нужно только загрузить соответствующий языковой пакет и использовать метод, аналогичный установке тем для использования.registerLocaleФункция монтирует объект языкового пакета, и переключение языка завершается после повторной инициализации.
// import the lang object and set when init
echarts.registerLocale('DE', lang);
echarts.init(DomElement, null, {
locale: 'DE'
});
Рефакторинг TypeScript
За последние 8 лет Apache ECharts превратился в очень сложную библиотеку визуализации.Чтобы продолжать рефакторинг и разработку новых функций более безопасно и эффективно, в начале разработки Apache ECharts 5 мы использовали TypeScript для код был переписан, а строгая типизация, обеспечиваемая TypeScript, вселила в нас больше уверенности в необходимости значительного рефакторинга кода для реализации более интересных функций при разработке ECharts 5.
Для разработчиков мы также можем напрямую генерировать лучший и более совместимый код из кода TypeScript.DTSТип файла описания. До этого файлы описания типов ECharts поддерживались и публиковались для нас разработчиками сообщества.DefinityTyped, это большая работа, большое спасибо за ваш вклад.
Кроме того, если компоненты разработчика внедряются по запросу, мы также предоставляемComposeOptionМетод type может сочетать тип элемента конфигурации, который включает только импортированные компоненты, что может обеспечить более строгую проверку типов и помочь вам заранее обнаружить непредставленные типы компонентов.
доступность
Apache ECharts всегда придавал большое значение доступному дизайну, и мы хотим сделать информацию, передаваемую диаграммами, в равной степени доступной для слабовидящих. И также есть надежда, что разработчики диаграмм смогут добиться этого с чрезвычайно низкими затратами на разработку, что повысит готовность разработчиков оказывать поддержку людям с нарушениями зрения.
В последней основной версии мы поддерживали функцию автоматического и интеллектуального создания описаний диаграмм одним щелчком мыши на основе различных типов диаграмм и данных, помогая разработчикам легко поддерживать информацию описания диаграмм DOM. В ECharts 5 мы также сделали больше дизайнов, чтобы улучшить доступность и помочь людям с нарушениями зрения лучше понять содержание диаграмм.
Цвет темы
При разработке новой версии стиля темы по умолчанию мы уделяем большое внимание дизайну специальных возможностей и неоднократно проверяем яркость и цветовую ценность цветов, чтобы помочь пользователям с нарушениями зрения четко идентифицировать данные диаграммы.
А для разработчиков с дополнительными потребностями в специальных возможностях мы также предоставляем специальную высококонтрастную тему, чтобы еще больше различать данные с помощью более контрастной цветовой темы.
аппликация
В ECharts 5 также добавлена функция предоставления надписей, которые выражаются шаблонами в качестве дополнительных цветов, чтобы еще больше помочь пользователям различать данные.
Кроме того, шаблоны наклеек также могут помочь в некоторых других сценариях, таких как: в газетах, книгах и других печатных материалах только с одним цветом или с очень небольшим количеством цветов, чтобы помочь лучше различать данные; использовать графические элементы, чтобы облегчить пользователям создание данных более интуитивно понятным понимание и др.
резюме
В дополнение к функциям, описанным выше, Apache ECharts также улучшил многие детали, чтобы упростить разработчикам создание диаграмм, которые просты в использовании по умолчанию и гибки в настройке, а также использовать диаграммы, чтобы рассказать историю, стоящую за данными.
Если вы хотите узнать подробности, не пропуститеОфициальный запуск Apache ECharts 5Ой!
Спасибо всем разработчикам, которые использовали ECharts и даже участвовали в вкладе сообщества, который сделал возможным Apache ECharts 5. Мы посвятим больше энтузиазма будущему развитию, и Apache ECharts также встретит вас в 6 с большей искренностью!