Блок "Диаграмма Apache ECharts"

Блок доступен начиная с версии 0.15

Назначение

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

Настройки блока

Группа "Диаграмма Apache ECharts"

Наименование	Тип	Обязательное	Описание	Пример
Настройки диаграммы	JSON	Да	При наличии данных на входе «Настройки диаграммы» (в формате JSON) приоритет отдается им, а настройки из интерфейса блока не применяются. Детальную информацию о настройках диаграммы можно получить из официальной документации Apache ECharts.

Пример настроек диаграммы

{
    "xAxis": {
        "type": "category",
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": [150, 230, 224, 218, 135, 147, 260],
        "type": "line"
    }]
}    

Общие настройки блоков описаны в отдельном разделе.

Входы

Название входа	Тип	Обязательный	Описание
Данные	Ряд данных	Нет	Массив данных с типом "Ряд данных" или "Объект"
Настройки диаграммы	Строка	Нет	Описание диаграммы, обычно строка в формате JSON, при передаче в блок переопределяет значение "Настройки диаграммы" из параметров

Выходы

В блоке нет выходов

События блока

Событие нажатия на точку

Событие позволяет запустить расчет отдельной цепочки блоков (включая другие визуализаторы), например, для расшифровки данных, выбранных на диаграмме. Для корректной работы события при использовании визуализатора «Диаграмма Apache ECharts» необходимо в данных раздела series передать дополнительный раздел options, содержащий информацию о временном ряде, соответствующем ряду данных диаграммы. Подробнее см. описание события Событие нажатия на точку.

Название выхода	Тип	Описание
Событие нажатия на точку	Ряд данных	Используется для динамического обновления связанных визуализаторов при выборе конкретной точки на диаграмме. Для корректной работы события необходимо выполнить некоторые дополнительные условия: 1. Выход считается, только если есть соединение со входом "Данные" 2. Для работы события необходимо в настройках диаграммы (входе или в блоке) описать шаблон Jinja2 3. При обработке события данные на выходе будут объектами со входа (они будут подставлены в шаблон) 4. Порядок рядов важен, т.к. при вызове события будет передан индекс ряда, на котором произошло нажатие

Пример шаблона настроек

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: data: {{input[0]["some-attr"]}} // вместо ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: {{input[0]["keys"]}} // вместо ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] {{input[0]["keys"]}}
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: {{input[0]["vl"]}} // вместо [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: {{input[1]["vl"]}} // вместо data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: {{input[2]["vl"]}} // вместо data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: {{input[3]["vl"]}} // вместо data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: {{input[4]["vl"]}} // вместо data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};    

Изменение timeline

Если диаграмма оснащена компонентом timeline, пользователь может нажать на любой его элемент. Это действие инициирует событие, в рамках которого в систему передаются ряды данных, соответствующие выбранному моменту времени (те данные, которые актуальны и видимы на диаграмме в этот момент). Подробнее см. описание события Изменение timeline.

Название выхода	Тип	Описание
Изменение timeline	JSON	Используется для динамического обновления связанных визуализаторов в процессе анимации диаграммы ECharts.Для корректной работы события необходимо определенным образом подготовить данные. В частности входные данные должны быть в виде линейного списка

Входные данные в виде линейного списка

option = {
  ...
  timeline: {
    ...
  }
  options: [
    {  series: ... }, // будет передано в событие при нажатии на 1 элемент таймлайна
    {  series: ... }, // будет передано в событие при нажатии на 2 элемент таймлайна
    ...
  ]
}    

Обратите внимание: данные возвращаются в формате диаграммы и для дальнейшего использования требуется преобразовать их в ряды таблицы с помощью блока Python.

Описание работы блока

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

Блок может работать в двух режимах:

• С рядами данных и настройками - на вход блока передаются как ряды данных, так и настройки диаграммы. В этом случае для настройки диаграммы используется шаблонизатор Jinja.
• Только с настройками - на вход передаются только настройки диаграммы (без рядов данных).

Пример настроек с использованием шаблонизатора

{
    "xAxis": {
        "type": "category",
        "data": "{{ to_list(input[0]['keys']) }}"
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": "{{ to_list(input[0]['vl']) }}",
        "type": "line",
        "options": "{{ to_options(input[0]) }}"
    },
    {
        "data": "{{ to_list(input[1]['vl']) }}",
        "type": "line",
        "options": "{{ to_options(input[1]) }}"
    }]
}

При использовании только настроек диаграммы все данные для отображения должны быть заданы в них. Для этого можно применить блок Python, передав его выход на вход «Настройки диаграммы».

Порядок генерации кода

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

Пример настроек с управляющими конструкциями

{
    "xAxis": {
        "type": "category",
        "data": [{% for i in input[0]["keys"] %} "{{ i }}" {% if not loop.last %},{% endif %}{% endfor %}]  <=== Заменится на массив строк: ["key1", "key2",..., "keyN"]
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": {{ input[0].vl }},   <=== Заменится на массив значений: [<value1>, <value2>,..., <valueN>]              
        "type": "line"
    }]
}

Настройки визуализатора

Визуализатор не имеет специфических настроек. Общий список доступен на странице Настройки визуализаторов

Описание работы визуализатора

Визуализатор отображает сформированную в соответствии с входными данными диаграмму:

Ссылки

Сайт проекта Apache ECharts: https://echarts.apache.org/en/index.html Документация шаблонизатора Jinja2: https://jinja.palletsprojects.com/en/2.11.x/ Блок "Python"