ECharts Dataset (dataset)

ECharts использует dataset для управления данными.

Компонент dataset используется для раздельного объявления данных, позволяя управлять данными независимо, повторно использовать их несколькими компонентами и обеспечивая сопоставление данных с визуальными элементами на основе данных.

Ниже приведён простейший пример dataset:

Кроме того, также можно использовать обычный формат массива объектов:

Сопоставление данных с графикой

Мы можем сопоставлять данные с графикой в элементе конфигурации.

С помощью атрибута series.seriesLayoutBy можно настроить, сопоставляет ли dataset столбцы или строки с графическими сериями. По умолчанию сопоставление выполняется по столбцам.

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

Данные, описываемые обычными диаграммами, чаще всего имеют структуру «двумерной таблицы». Мы можем использовать свойство series.encode, чтобы сопоставить соответствующие данные с осями (такими как оси X и Y):

Базовая структура объявления encode выглядит следующим образом: слева от двоеточия указывается конкретное имя системы координат, метки и т. п., например 'x', 'y', 'tooltip' и т. д., а справа от двоеточия — имя измерения в данных (в строковом формате) или индекс измерения (в числовом формате, отсчёт с 0). Можно указать одно или несколько измерений (с помощью массива). В целом не всю приведённую ниже информацию нужно записывать; записывайте её по мере необходимости.

Ниже перечислены свойства, поддерживаемые encode:

// 在任何坐标系和系列中，都支持：
encode: {
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: [1, 3],
    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3
}

// 直角坐标系（grid/cartesian）特有的属性：
encode: {
    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
    x: [1, 5, 'score'],
    // 把“维度0”映射到 Y 轴。
    y: 0
}

// 单轴（singleAxis）特有的属性：
encode: {
    single: 3
}

// 极坐标系（polar）特有的属性：
encode: {
    radius: 3,
    angle: 2
}

// 地理坐标系（geo）特有的属性：
encode: {
    lng: 3,
    lat: 2
}

// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
    value: 3
}

Дополнительные примеры encode:

Сопоставление визуальных каналов (цвет, размер и т. д.)

Мы можем использовать компонент visualMap для сопоставления визуальных каналов.

Визуальные элементы могут быть:

• symbol: графическая форма графического элемента.
• symbolSize: размер графического элемента.
• color: цвет графического элемента.
• colorAlpha: прозрачность цвета графического элемента.
• opacity: прозрачность графического элемента и его дополнительных элементов (например, текстовых меток).
• colorLightness: светлота цвета.
• colorSaturation: насыщенность цвета.
• colorHue: оттенок цвета.

Можно определить несколько компонентов visualMap, что позволяет одновременно визуально сопоставлять несколько измерений в данных.

Интерактивная связь

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