ECharts GL (hereafter referred to as GL) complements ECharts with a wealth of 3D visualization components. In this article, we will briefly introduce how to implement some common 3D visualizations based on GL. In fact, if you have some knowledge of ECharts, you can get used to GL very quickly. The GL configuration items are designed according to ECharts standards and the difficulty of getting used to GL.
After reading the article to get a general idea, you can go to the official examples and Gallery to learn more about the examples made using GL. For code that we can’t explain in the article, you can also go to the GL configuration items manual to see how to use the configuration items.
How do I download and import ECharts GL
In order not to add to the already large size of the full version of ECharts, we are offering GL as an extension pack, similar to extensions like water Balloon Diagrams. If you want to use the various components in GL, You just need to introduce echarts-gl.min.js in addition to the echarts.min.js. You can download the latest version of GL from the official website and introduce it in the page with the tag:
<script src="lib/echarts.min.js"></scrpt>
<script src="lib/echarts-gl.min.js"></script>
Copy the codeIf your project uses Webpack or rollup to package code, this can also be introduced via NPM installation
npm install echarts
npm install echarts-gl
Copy the codeECharts and ECharts GL are introduced via ES6’s import syntax
import echarts from 'echarts';
import 'echarts-gl';
Copy the codeDeclare a basic three-dimensional Cartesian coordinate system
After introducing ECharts and ECharts GL, we first declare a basic THREE-DIMENSIONAL Cartesian coordinate system for drawing three-dimensional scatter plots, bar plots, surface plots and other common statistical graphs.
In ECharts we have the Grid component that provides a rectangular area for placing a two-dimensional Cartesian coordinate system, with xAxis and yAxis on the Cartesian coordinate system. For a three-dimensional cartesian coordinate system, we provide a grid3D component in GL to partition a three-dimensional cartesian space, with xAxis3D, yAxis3D, and zAxis3D placed on this grid3D.
Tip: in GL, we add the suffix OF 3D to all 3D components and series except Globe to distinguish them. For example, the 3D scatter map is scatter3D, the 3D map is map3D, etc.
The following code declares the simplest three-dimensional Cartesian coordinate system
letGrid3D: {}, // By default, x, y, and z are numeric axes from 0 to 1, respectively. XAxis3D: {}, yAxis3D: {}, zAxis3D: {} }Copy the codeThe effect is as follows:
Just like two-dimensional Cartesian coordinates, each axis has multiple types. The default is numeric axis. If you need a category axis, simply set type to ‘category’.
Draw a scatter plot in three dimensions
Having declared the Cartesian coordinate system, let’s first try to draw a scatter plot in this three-dimensional Cartesian coordinate system using a program that generates normally distributed data.
This is code that generates normally distributed data. You can forget about how this code works, except that it generates a 3d normally distributed data in a Data array.
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)))
)
returnamplitude * Math.pow(Math.E, exponent); }.bind(null, amplitude, x0, y0, sigmaX, sigmaY); } // Create a gaussian function const Gaussian = makeGaussian(50, 0, 0, 20, 20);let data = [];
for(var i = 0; i < 1000; I++) {// x, y are randomly distributedlet x = Math.random() * 100 - 50;
let y = Math.random() * 100 - 50;
let z = gaussian(x, y);
data.push([x, y, z]);
}
Copy the codeThe resulting normally distributed data would look something like this:
[[46.74395071259907, -33.88391024738553, 0.7754030099768191], [-18.45302873809771, 16.88114775416834, 22.87772504105404], [2.9908128281121336, -0.027699444453467947, 49.44400635911886],Copy the codeEach term contains x, y, and z values, which are mapped to the Cartesian x, y, and Z axes, respectively.
We can then plot these data as normally distributed points in three-dimensional space using the scatter3D series of types provided by GL.
let option = {
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: { max: 100 },
series: [{
type: 'scatter3D',
data: data
}]
}
Copy the code
Three-dimensional scatter plots using real data
Let’s look at an example of a three-dimensional scatter plot using real multidimensional data.
Before you can start with www.echartsjs.com/examples/da… Get this data.
If you format it in the editor, you can see that this data is in a very traditional JSON table format. The first row is the attribute name of each column of data, from which the meaning of each column can be seen, namely, per capita income, life expectancy, population, country and year.
[["Income"."Life Expectancy"."Population"."Country"."Year"],
[815, 34.05, 351014, "Australia"[1314, 39, 645526,"Canada", 1800], [985, 32, 321675013"China", 1800], [864, 32.2, 345043"Cuba", 1800], [1244, 36.5731262, 977662"Finland", 1800],... ]Copy the codeIn ECharts 4 we can import this data very easily using the DATASET component. If you are not familiar with dataset, you can see the dataset using tutorial
$.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}]})});Copy the code
By default, ECharts puts the first three columns, namely Income, Life Expectancy and Population, on axis X, Y and Z, respectively.
Using the encode attribute, we can also map data from a specified column to a specified coordinate axis, thus saving a lot of tedious data conversion code. For example, if we change the X axis into Country, y axis into Year, and Z axis into Income, we can see the per capita Income distribution of different countries in different years.
Mychart.setoption ({grid3D: {}, xAxis3D: {// Because the x and y axes are category data, it needs to be settype: 'category'Ensure that data is displayed correctly.type: 'category'
},
yAxis3D: {
type: 'category'
},
zAxis3D: {},
dataset: {
source: data
},
series: [
{
type: 'scatter3D', symbolSize: 2.5, encode: {// The default dimension name is the header attribute name x:'Country',
y: 'Year',
z: 'Income',
tooltip: [0, 1, 2, 3, 4]
}
}
]
});
Copy the codeVisualMap component is used to encode 3d scatter graph
In the previous multidimensional data example, we still had several dimensions (columns) left unexpressed, and we can continue to encode the fourth dimension into color using the built-in visualMap component of ECharts.
Mychart.setoption ({grid3D: {viewControl: {// Use orthogonal projection. projection:'orthographic'}}, xAxis3D: {// Because the X-axis and Y-axis are category data, it needs to be settype: 'category'Ensure that data is displayed correctly.type: 'category'
},
yAxis3D: {
type: 'log'
},
zAxis3D: {},
visualMap: {
calculable: true, Max: 100, // The default dimension is the header property name 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: {// The default dimension name is the header attribute name x:'Country',
y: 'Population',
z: 'Income',
tooltip: [0, 1, 2, 3, 4]
}
}
]
})
Copy the codeIn this code, we add the visualMap component on the basis of the previous example and map the data in the Column Life Expectancy to different colors.
In addition, we also changed the default perspective projection to orthogonal projection. In some scenes, orthogonal projection can avoid the error of expression caused by near and far.
In addition to the visualMap component, you can leverage other built-in ECharts components and take full advantage of their interactions, such as Legend. It is also possible to achieve a series of 2-d and 3-D mash-ups using this example in combination with a 3-D scatter plot and scatter matrix.
When implementing GL, we try our best to minimize the difference between WebGL and Canvas, so as to make the use of GL more convenient and natural.
Display other types of three-dimensional diagrams in cartesian coordinates
Besides scatterplot, we can also draw other kinds of 3D diagram in 3d Cartesian coordinate system by GL. For example, change the scatter3D type to bar3D in the previous example to create a three-dimensional bar chart.
There is also a 3d surface graph that is used in machine learning, a 3d surface graph is often used to represent the trend of data on a plane, and we can also draw the normal distribution data as follows.
letdata = []; // The surface diagram requires that the input data be distributed in a grid order.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
}]
}
Copy the code
The boss wants a three-dimensional histogram effect
Finally, we are often asked how to use ECharts to draw stereoscopic histogram effects with only two dimensional data. This is generally not recommended, as unnecessary stereoscopic bar charts can easily lead to incorrect representation, as explained in our bar chart guide.
But if there are some other factors that make it necessary to draw a solid bar chart, GL can also do that. 丶 We have already written similar examples in the Gallery for your reference.
3D stacking histogram
3 d histogram
