Библиотека диаграмм на основе HTML5 Canvas: ECharts

ECharts, открытый командой коммерческой визуализации данных фронтенда Baidu, основан на HTML5 Canvas. Это чистая библиотека графиков на JavaScript, предоставляющая интуитивные, яркие, интерактивные и настраиваемые графики визуализации данных. Инновационные функции, такие как пересчет при перетаскивании, представление данных и перемещение по диапазону значений, значительно улучшают пользовательский опыт и дают пользователям возможность извлекать и интегрировать данные.——В эпоху больших данных пришло время переосмыслить графики данных

Архитектура

ECharts (Enterprise Charts — библиотека графиков для коммерческих продуктов)

Предоставляет библиотеку графиков для типовых коммерческих продуктов, основанную наZRenderи создающую базовые компоненты, такие как системы координат, легенды, всплывающие подсказки и панели инструментов, а на их основе строятся линейные графики (диаграммы с областями), столбчатые диаграммы (линейчатые диаграммы), точечные диаграммы (пузырьковые диаграммы), круговые диаграммы (кольцевые диаграммы), свечные графики, карты, хордовые диаграммы и диаграммы с силовой компоновкой. Также поддерживает стековое наложение в любом измерении и смешанное отображение нескольких типов диаграмм.

Смешанные графики более выразительны и интересны. Графики, предоставляемые ECharts (9 категорий, всего 14 типов), поддерживают произвольное смешивание:

Линейные графики (диаграммы с областями), столбчатые диаграммы (линейчатые диаграммы), точечные диаграммы (пузырьковые диаграммы), свечные графики, круговые диаграммы (кольцевые диаграммы), радарные диаграммы, карты, хордовые диаграммы и диаграммы с силовой компоновкой.

Стандартный график в смешанном режиме:

Содержит уникальные модули легенды, панели инструментов, масштабирования области данных и перемещения по диапазону значений, а также декартову систему координат (которая может содержать одну или несколько категорийных осей и одну или несколько осей значений, всего до четырех осей: сверху, снизу, слева, справа)

Пересчет при перетаскивании

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

Представление данных

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

Возможно, вам достаточно предоставить текстовые данные, разделённые запятыми, и они поймут — это представление данных ECharts! Конечно, вы можете переопределить способ вывода представления данных, чтобы представить данные своим уникальным образом.

Если ваши пользователи достаточно продвинуты, вы даже можете включить функцию редактирования представления данных. По сравнению с пересчётом перетаскиванием это пакетное изменение данных!

Echarts 数据视图

Динамическое переключение типов

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

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

Переключение легенды

Отображение нескольких серий одновременно даёт богатое содержание, но как дать пользователям переключиться на конкретную интересующую их серию?

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

Выбор области данных

Данные могут быть бесконечными, но пространство отображения всегда ограничено. Компонент выбора области данных предоставляет возможность перемещаться по большим объёмам данных, позволяя пользователям выбирать и отображать интересующую их область данных.

В сочетании с динамическими линиями меток среднего (экстремального) значения и маркерами это демонстрирует мощные возможности анализа данных.

Связывание нескольких графиков

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

ECharts предоставляет возможность связывания нескольких графиков (connect), которая делает гораздо больше, чем просто отображение деталей при наведении. Связанные графики совместно используют события компонентов и автоматически сшивают изображения при сохранении.

Перемещение по диапазону значений

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

Но как сосредоточиться на значениях, которые вас интересуют? Мы создали функцию под названием «перемещение по диапазону значений», позволяющую легко фильтровать значения.

Эффекты свечения

Мы знаем, что во многих случаях нужны какие-то привлекающие внимание возможности.

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

Крупномасштабная диаграмма рассеяния

Как отобразить миллионы дискретных точек данных, чтобы найти их распределение и кластеризацию? Кажется, нет другого выбора, кроме использования профессиональных статистических инструментов (таких как MATLAB)?

Нет, ECharts изобрёл крупномасштабную диаграмму рассеяния на основе пикселей (запатентовано). Область рассеяния 900 x 400 может отобразить 360,000 наборов данных без повторений. Для обычных приложений современных браузеров достаточно, чтобы легко отображать миллионы точек рассеяния!

Динамическое добавление данных

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

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

Echarts 动态数据添加

Поддержка линий разметки

Линия тренда? Средняя линия? Будущие тенденции? Корректирующие значения? Пользователи с потребностями, естественно, знают назначение~

Предоставление поддержки линий разметки — это необходимая функция в K-line графиках! Да, K-line графики находятся в разработке~

Многомерное стекирование

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

Режим карты субрегионов

Типы карт поддерживают мир, Китай и 34 провинции, муниципалитета и автономных района по всей стране. Он также поддерживает режим субрегионов, который расширяет основной тип карты, включая вложенные карты субрегионов, что позволяет легко выводить упрощённые карты 176 стран и регионов мира и более 600 провинций и городов по всей стране.

Расширение карт GeoJSON

Встроенные карты управляются данными карт, сгенерированными из стандартных географических данных GeoJSON, сжатых с помощью эффективного алгоритма сжатия (около 30% размера стандартного GeoJSON). Если встроенные типы карт или данные не соответствуют потребностям вашего проекта, вы можете просто динамически зарегистрировать, чтобы создать нужные вам новые типы.

Маркеры и линии разметки

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

Персонализированная настройка

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

Событийное взаимодействие

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

Связанные ресурсы

Учебник по ECharts:https://www.example.com/echarts/echarts-tutorial.html
Скачать ECharts:https://github.com/apache/incubator-echarts
Официальный сайт ECharts:https://www.echartsjs.com/zh/index.html
Учебник по HTML5 Canvas:https://www.example.com/html/html5-canvas.html
ZRender：https://www.example.com/w3cnote/html5-canvas-zrender.html