В ECharts 4 появился компонент `набор данных` (`dataset`) для объявления данных отдельно, который выглядит так:
option = {
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
legend: {},
tooltip: {},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
Самый простой пример, результат такой:
Преимущества набора данных:
- С помощью `dataset` вы можете приблизиться к общепринятому способу визуализации данных: на основе данных (компонент `dataset` предоставляет данные), указать сопоставление данных с визуальными элементами (указать сопоставление с помощью атрибута `encode`) и сформировать графики.
- Данные и другие конфигурации могут быть разделены, что относительно легко для индивидуального управления пользователями и экономит некоторые этапы обработки данных.
- Данные могут повторно использоваться несколькими сериями или компонентами.Для больших данных нет необходимости создавать копию для каждой серии.
- Поддерживайте более распространенные форматы данных, такие как двумерные массивы, массивы объектов и т. д., в определенной степени избегайте преобразования пользователей в форматы данных.
Преобразование данных в график
В этой статье наша логика создания диаграмм визуализации данных следующая: на основе данных указать, как сопоставить с графикой в элементах конфигурации.
Грубо говоря, эти отображения можно сделать:
- Указывает, сопоставляются ли столбцы или строки набора данных с сериями графиков. Это можно настроить с помощью свойства `series.seriesLayoutBy`.
- Укажите, какие столбцы или строки набора данных соответствуют осям (например, оси X, Y), всплывающим подсказкам, меткам, размеру и цвету графических элементов (visualMap). Это можно настроить с помощью свойства `series.encode`. Если вам нужно сопоставить визуальные размеры, такие как размер цвета, вы можете использовать компонент visualMap.
Карта по строке или столбцу
С помощью таблицы данных пользователь может гибко настроить соответствие данных осям и рядам графика. В приведенном выше примере такая конфигурация сопоставления не указана, тогда сопоставление по умолчанию ECharts соответствует наиболее распространенному пониманию:
- Ось X объявлена как ось категорий, которая по умолчанию автоматически соответствует первому столбцу в dataset.source;
- Три ряда гистограмм, один к одному соответствующие каждому последующему столбцу в dataset.source.
Пользователи могут использовать элемент конфигурации `seriesLayoutBy`, чтобы изменить представление диаграммы о строках и столбцах. `seriesLayoutBy` может принимать значения:
- «столбец»: значение по умолчанию. Ряды размещаются в столбцах `набора данных`.
- «строка»: серия помещается в строку «набора данных».
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}
Эффект такой:
Что еще более важно, мы можем использовать параметр конфигурации `encode`, чтобы более подробно указать, как данные отображаются на графике. Общее ощущение такое:
измерение
Прежде чем представить `encode`, давайте сначала познакомимся с понятием «измерение».
Большая часть данных, описываемых обычными диаграммами, представляет собой структуру «двумерной таблицы». В приведенных выше примерах мы все используем двумерные массивы для размещения двумерных таблиц. Теперь, когда мы сопоставляем ряды со «столбцами», каждый столбец называется «измерением», а каждая строка называется элементом. И наоборот, если мы сопоставляем ряды со строками таблицы, то каждая строка является «измерением», а каждый столбец — элементом.
Размеры могут иметь индивидуальные имена для удобства отображения на диаграммах. Имя измерения можно определить в первой строке (или первом столбце) набора данных. Например, в приведенном выше примере «оценка», «сумма», «продукт» — это имена измерений. Начиная со второй строчки, это официальные данные. Независимо от того, содержит ли первая строка (столбец) в `dataset.source` имя измерения или нет, ECharts автоматически обнаружит его по умолчанию. Конечно, вы также можете установить `dataset.sourceHeader: true`, чтобы указать, что первая строка (столбец) является измерением, или `dataset.sourceHeader: false`, чтобы указать, что первая строка (столбец) является непосредственно данными в начале .
Определение измерения также может быть определено с использованием отдельного `dataset.dimensions` или `series.dimensions`, которые могут одновременно указывать имя измерения и тип измерения:
var option1 = {
dataset: {
dimensions: [
{name: 'score'},
// 可以简写为 string，表示维度名。
'amount',
// 可以在 type 中指定维度类型。
{name: 'product', type: 'ordinal'}
],
source: [...]
},
...
};
var option2 = {
dataset: {
source: [...]
},
series: {
type: 'line',
// 在系列中设置的 dimensions 会更优先采纳。
dimensions: [
null, // 可以设置为 null 表示不想设置维度名
'amount',
{name: 'product', type: 'ordinal'}
]
},
...
};
В большинстве случаев нам не нужно задавать тип размера, потому что он будет определен автоматически. Однако, если оценка недостаточно точна из-за таких причин, как пустые данные, вы можете вручную установить тип измерения.
Тип измерения может принимать следующие значения:
- 'число': по умолчанию означает обычные данные.
- «порядковый номер»: для данных строкового типа, таких как категория и текст, если их необходимо использовать в числовой строке, они должны быть типа «порядковый номер». ECharts автоматически определит этот тип по умолчанию. Однако автоматическая оценка не может быть очень полной, поэтому пользователь также может принудительно ввести спецификацию вручную.
- «время»: указывает данные о времени. Установите значение «время», чтобы поддерживать автоматический анализ данных в метках времени. Например, данные этого параметра «2017-05-10» будут автоматически анализироваться. См. [data](option.html#series.data) для поддержки типа времени.
- 'float': если установлено значение `float`, при сохранении будет использоваться `TypedArray`, что хорошо для оптимизации производительности.
- 'int': если установлено значение `float`, при сохранении будет использоваться `TypedArray`, что хорошо для оптимизации производительности.
Преобразование данных в графику (кодирование)
Поняв концепцию размерности, мы можем использовать `encode` для отображения. Базовая структура объявления `encode` выглядит следующим образом, где левая сторона двоеточия представляет собой систему координат, метку и другие конкретные имена, такие как `'x'`, `'y'`, `'tooltip'` и т. д. Справа от двоеточия находится имя измерения в данных (строковый формат) или порядковый номер измерения (числовой формат, считая от 0), можно указать одно или несколько измерений (используя массив). При нормальных обстоятельствах следующая информация не обязательно должна быть записана полностью, но может быть записана по мере необходимости.
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
xAxis: {},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
}
}
]
};
Эффект следующий:
Следующее дает более богатый `encode`Пример.
Отображение визуальных каналов (цвет, размер и т.д.)
Мы можем использовать компонент `visualMap` для визуального отображения каналов. Вот пример:
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
grid: {containLabel: true},
xAxis: {name: 'amount'},
yAxis: {type: 'category'},
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#D7DA8B', '#E15457']
}
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};
Несколько общих настроек сопоставления
Q: Как установить третий столбец как ось X, а пятый столбец как ось Y?
отвечать:
series: {
encode: {x: 3, y: 5},
...
}
Q: Как установить третью строку как ось X, а пятую строку как ось Y?
отвечать:
series: {
encode: {x: 3, y: 5},
seriesLayoutBy: 'row',
...
}
Q: Как установить второй столбец в качестве меток?
отвечать:
Что касается отображения меток (`label.formatter`), теперь поддерживается такой синтаксис:
'aaa{@product}bbb{@score}ccc{@[4]}ddd' для обозначения определенного значения параметра. Где '{@score}' относится к значению в измерении "названный счет", а '{@[4]}' относится к значению в измерении 4.
series: [{
label: {
show: true,
// 标签中引用第二列。
formatter: 'The value at column 2 is: {@[2]}.'
},
...
}, {
label: {
show: true,
// 标签中引用维度名为 product 的列。
formatter: 'The product name is: {@product}.'
},
...
}]
В: Как сделать так, чтобы во всплывающей подсказке отображались столбцы 2 и 3?
отвечать:
series: {
encode: {
tooltip: [2, 3]
...
},
...
}
В: В данных нет имени измерения, так как же указать имя измерения?
отвечать:
dataset: {
dimensions: ['score', 'amount'],
source: [
[89.3, 3371],
[92.1, 8123],
[94.4, 1954],
[85.4, 829]
]
}
В: Как сопоставить четвертый столбец с размером точек пузырьковой диаграммы?
отвечать:
var option = {
dataset: {
source: [
[12, 323, 11.2],
[23, 167, 8.3],
[81, 284, 12],
[91, 413, 4.1],
[13, 287, 13.5]
]
},
visualMap: {
show: false,
dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。
min: 2, // 需要给出数值范围，最小数值。
max: 15, // 需要给出数值范围，最大数值。
inRange: {
// 气泡尺寸：5 像素到 60 像素。
symbolSize: [5, 60]
}
},
xAxis: {},
yAxis: {},
series: {
type: 'scatter'
}
};
Q: Отображение указано в encode, но оно не работает?
A: Вы можете проверить, есть ли какие-либо орфографические ошибки.Например, имя измерения: «Ожидаемая продолжительность жизни», а «Ожидаемая продолжительность жизни» пишется в кодировке.
Различные форматы данных
В большинстве распространенных диаграмм данные подходят для представления в виде двумерной таблицы. Широко используемое программное обеспечение для работы с таблицами данных (например, MS Excel, Numbers) или реляционные базы данных представляют собой двумерные таблицы. Их данные можно экспортировать в формате JSON и импортировать в `dataset.source`, что во многих случаях позволяет исключить некоторые этапы обработки данных.
Если данные экспортируются в виде файла csv, вы можете использовать некоторые инструменты csv, такие как [dsv](github.com/d3/d3-dsv) или [PapaParse](GitHub.com/M Холт/папа П…) для преобразования csv в JSON.
В формате передачи данных, обычно используемом в JavaScript, двумерные массивы могут более интуитивно хранить двумерные таблицы. Предыдущие примеры представлены двумерными массивами.
В дополнение к двумерным массивам наборы данных также поддерживают форматы данных, такие как следующие форматы ключ-значение, которые также очень распространены. Но в этом формате параметр `seriesLayoutBy` в настоящее время не поддерживается.
dataset: [{
// 按行的 key-value 形式，这是个比较常见的格式。
source: [
{product: 'Matcha Latte', count: 823, score: 95.8},
{product: 'Milk Tea', count: 235, score: 81.4},
{product: 'Cheese Cocoa', count: 1042, score: 91.2},
{product: 'Walnut Brownie', count: 988, score: 76.9}
]
}, {
// 按列的 key-value 形式。
source: {
'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
'count': [823, 235, 1042, 988],
'score': [95.8, 81.4, 91.2, 76.9]
}
}]
Кроме того, метод объявления данных, который всегда был в ECharts 4, по-прежнему поддерживается нормально, если серия была объявлена как `series.data`, то вместо `dataset` будет использоваться `series.data`.
Наконец, учитываяПример, несколько диаграмм совместно используют «набор данных» со связанным взаимодействием.
Для получения более подробной информации см. эторуководство.