ECharts GL (далее GL) дополняет ECharts богатыми компонентами 3D-визуализации.В этой статье мы кратко расскажем, как реализовать некоторые общие работы по 3D-визуализации на основе GL. Фактически, если у вас есть определенное понимание ECharts, вы также можете очень быстро начать работу с GL.Элементы конфигурации GL полностью разработаны в соответствии со стандартами и сложностью начала работы с ECharts.
После прочтения статьи для общего понимания можно продолжитьОфициальный примериGalleryЧтобы узнать больше примеров, сделанных с помощью GL, для кода, который мы не можем объяснить в статье, вы также можете перейти кРуководство по элементам конфигурации GLУзнайте, как использовать определенные элементы конфигурации.
Как загрузить и импортировать ECharts GL
Чтобы не увеличивать объем и без того большой полной версии ECharts, мы предоставляем GL как пакет расширения, аналогичный таким расширениям, как карты водного поло.Если вы хотите использовать различные компоненты в GL, вам нужно только импортироватьecharts.min.jsна основе введенияecharts-gl.min.js. ты можешь начатьОфициальный сайтЗагрузите последнюю версию GL и импортируйте ее через тег на странице:
<script src="lib/echarts.min.js"></scrpt>
<script src="lib/echarts-gl.min.js"></script>
Если ваш проект использует веб-пакет или накопительный пакет для упаковки кода, вы также можете импортировать его после установки через npm.
npm install echarts
npm install echarts-gl
Представляем ECharts и ECharts GL через синтаксис импорта ES6
import echarts from 'echarts';
import 'echarts-gl';
Объявить базовую трехмерную декартову систему координат
После введения ECharts и ECharts GL давайте сначала объявим базовую трехмерную декартову систему координат для рисования трехмерных точечных диаграмм, гистограмм, поверхностных диаграмм и других общих статистических диаграмм.
В ECharts у нас естьgridКомпонент используется для предоставления прямоугольной области для размещения двумерной декартовой системы координат и оси x в декартовой системе координат (xAxis) и оси Y (yAxis). Для трехмерной декартовой системы координат мы предоставляем в GLgrid3DКомпонент используется для разделения трехмерного декартова пространства и размещается в этомgrid3DВверхxAxis3D, yAxis3D, zAxis3D.
Совет: В GL мы добавляем суффикс 3D ко всем 3D-компонентам и сериям, кроме глобуса, чтобы различать их.Например, 3D-диаграмма рассеяния — Scatter3D, 3D-карта — map3D и т. д.
Следующий код объявляет простейшую трехмерную декартову систему координат.
let option = {
// 需要注意的是我们不能跟 grid 一样省略 grid3D
grid3D: {},
// 默认情况下, x, y, z 分别是从 0 到 1 的数值轴
xAxis3D: {},
yAxis3D: {},
zAxis3D: {}
}
Эффект следующий:
Как и в двумерной декартовой системе координат, каждая ось будет иметь несколько типов. По умолчанию используется ось значений. Если это должна быть ось категорий, просто установите ее какtype: 'category'Вот и все.
нарисовать трехмерную диаграмму рассеяния
После объявления декартовой системы координат давайте сначала попробуем нарисовать точечную диаграмму в этой трехмерной декартовой системе координат с программно сгенерированными нормально распределенными данными.
Ниже приведен код для генерации данных с нормальным распределением. Вам не нужно беспокоиться о том, как работает этот код, просто знайте, что он генерирует трехмерные данные с нормальным распределением и поместите их вdataв массиве.
function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {
let exponent = -(
( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))
+ ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))
)
return amplitude * Math.pow(Math.E, exponent);
}.bind(null, amplitude, x0, y0, sigmaX, sigmaY);
}
// 创建一个高斯分布函数
const gaussian = makeGaussian(50, 0, 0, 20, 20);
let data = [];
for (var i = 0; i < 1000; i++) {
// x, y 随机分布
let x = Math.random() * 100 - 50;
let y = Math.random() * 100 - 50;
let z = gaussian(x, y);
data.push([x, y, z]);
}
Сгенерированные нормально распределенные данные выглядят так:
[
[46.74395071259907, -33.88391024738553, 0.7754030099768191],
[-18.45302873809771, 16.88114775416834, 22.87772504105404],
[2.9908128281121336, -0.027699444453467947, 49.44400635911886],
...
]каждый включаетx, y, zТри значения, которые будут сопоставлены с осями x, y и z декартовой системы координат.
Тогда мы можем использоватьscatter3DТип серии отображает данные в виде нормально распределенных точек в трехмерном пространстве.
let option = {
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: { max: 100 },
series: [{
type: 'scatter3D',
data: data
}]
}
Трехмерный точечный график с использованием реальных данных
Далее давайте рассмотрим пример трехмерной диаграммы рассеяния с использованием реальных многомерных данных.
Прежде чем начать, начните сЧарты Woohoo.E JS.com/examples/big…Получите эти данные.
Если вы отформатируете его в редакторе, вы увидите, что эти данные представляют собой очень традиционный формат таблицы после преобразования в JSON. Первая строка - это имя атрибута каждого столбца данных. Вы можете увидеть значение каждого столбца данных из этого имени атрибута, а именно доход на душу населения, ожидаемая продолжительность жизни, население, страна и год.
[
["Income", "Life Expectancy", "Population", "Country", "Year"],
[815, 34.05, 351014, "Australia", 1800],
[1314, 39, 645526, "Canada", 1800],
[985, 32, 321675013, "China", 1800],
[864, 32.2, 345043, "Cuba", 1800],
[1244, 36.5731262, 977662, "Finland", 1800],
...
]
В ECharts 4 мы можем легко импортировать эти данные с помощью компонента набора данных. Если вы не знакомы с набором данных, вы можете прочитать егоруководство по использованию набора данных
$.getJSON('data/asset/data/life-expectancy-table.json', function (data) {
myChart.setOption({
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {},
dataset: {
source: data
},
series: [
{
type: 'scatter3D',
symbolSize: 2.5
}
]
})
});
По умолчанию ECharts размещает первые три столбца, а именно «Доход», «Ожидаемая продолжительность жизни» и «Население» на осях x, y и z соответственно.
Используя атрибут encode, мы также можем сопоставить данные указанного столбца с указанной осью координат, тем самым сэкономив много утомительного кода преобразования данных. Например, если мы изменим ось X на Страна, ось Y на Год и ось Z на Доход, мы сможем увидеть распределение дохода на душу населения в разных странах и годах.
myChart.setOption({
grid3D: {},
xAxis3D: {
// 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。
type: 'category'
},
yAxis3D: {
type: 'category'
},
zAxis3D: {},
dataset: {
source: data
},
series: [
{
type: 'scatter3D',
symbolSize: 2.5,
encode: {
// 维度的名字默认就是表头的属性名
x: 'Country',
y: 'Year',
z: 'Income',
tooltip: [0, 1, 2, 3, 4]
}
}
]
});
Визуальное кодирование 3D-диаграмм рассеяния с помощью компонента visualMap
В примере многомерных данных у нас все еще есть несколько измерений (столбцов), которые не могут быть выражены с помощью встроенных ECharts.visualMapКомпоненты Мы можем пойти дальше и закодировать четвертое измерение в цветах.
myChart.setOption({
grid3D: {
viewControl: {
// 使用正交投影。
projection: 'orthographic'
}
},
xAxis3D: {
// 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: 'category' 保证正确显示数据。
type: 'category'
},
yAxis3D: {
type: 'log'
},
zAxis3D: {},
visualMap: {
calculable: true,
max: 100,
// 维度的名字默认就是表头的属性名
dimension: 'Life Expectancy',
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
dataset: {
source: data
},
series: [
{
type: 'scatter3D',
symbolSize: 5,
encode: {
// 维度的名字默认就是表头的属性名
x: 'Country',
y: 'Population',
z: 'Income',
tooltip: [0, 1, 2, 3, 4]
}
}
]
})
В этот код мы добавили на основе предыдущего примераvisualMapкомпоненты, будетLife ExpectancyЭтот столбец данных отображается разными цветами.
Кроме того, мы также изменили исходную перспективную проекцию по умолчанию на ортогональную проекцию. Ортогональная проекция может избежать ошибки выражения, вызванной почти большим и очень маленьким в некоторых сценах.
КромеvisualMapкомпоненты, вы также можете использовать другие встроенные компоненты ECharts и в полной мере использовать эффекты взаимодействия этих компонентов, такие какlegend. также может быть какКомбинация 3D-диаграммы рассеяния и матрицы рассеянияВ этом примере также реализован гибрид серий 2D и 3D.
При реализации GL мы максимально минимизировали различия между WebGL и Canvas, чтобы использование GL было более удобным и естественным.
Отображение других типов 3D-диаграмм в декартовых координатах
В дополнение к точечным графикам мы также можем рисовать другие типы трехмерных диаграмм в трехмерной декартовой системе координат через GL. Например, в примере только чтоscatter3Dтип изменен наbar3DЕе можно превратить в трехмерную гистограмму.
Существуют также трехмерные поверхностные графики, которые используются в машинном обучении.surface, трехмерный график поверхности часто используется для выражения тренда данных на плоскости Мы также можем нарисовать данные нормального распределения в виде графика поверхности, как показано ниже.
let data = [];
// 曲面图要求给入的数据是网格形式按顺序分布。
for (let y = -50; y <= 50; y++) {
for (let x = -50; x <= 50; x++) {
let z = gaussian(x, y);
data.push([x, y, z]);
}
}
option = {
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: { max: 60 },
series: [{
type: 'surface',
data: data
}]
}
Босс хочет эффект трехмерной гистограммы
Наконец, нас часто спрашивают, как использовать ECharts для создания эффекта трехмерной гистограммы только с двумерными данными. Вообще говоря, мы не рекомендуем этого делать, потому что эта ненужная трехмерная гистограмма может легко привести к неправильным выражениям.Руководство пользователя гистограммыобъяснение в .
Но если есть какие-то другие факторы, заставляющие рисовать трехмерную гистограмму, это можно сделать с помощью GL., соевое молокоиАлорПодобные примеры были написаны в галерее, вы можете обратиться к ним.