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.

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"></script>
<script src="lib/echarts-gl.min.js"></script>
Copy the code

If 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 code
ECharts and ECharts GL are introduced via ES6's import syntax
import echarts from 'echarts';
import 'echarts-gl';
Copy the code

Declare 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

var option = {
    // Note that we can't omit grid3D like grid
    grid3D: {},
    // By default, x, y, and z are from 0 to 1, respectively
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {}}Copy the code

The effect is as follows:

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) {
        var 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);
}
// Create a Gaussian distribution function
var gaussian = makeGaussian(50.0.0.20.20);

var data = [];
for (var i = 0; i < 1000; i++) {
    // x and y are randomly distributed
    var x = Math.random() * 100 - 50;
    var y = Math.random() * 100 - 50;
    var z = gaussian(x, y);
    data.push([x, y, z]);
}
Copy the code

The 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 code

Each 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.

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.

Start with www.echartsjs.com/examples/da… Get this data.

If you format it, you can see that this data is in the traditional form of a table converted to JSON. 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".1800],
[1314.39.645526."Canada".1800],
[985.32.321675013."China".1800],
[864.32.2.345043."Cuba".1800],
[1244.36.5731262.977662."Finland".1800],... ]Copy the code

In 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

$.get('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

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: {
        // Since the x and y axes are both category data, we need to set type: 'category' to ensure that the 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 code

VisualMap component is used to encode 3d scatter graph

myChart.setOption({
    grid3D: {
        viewControl: {
            // Use orthogonal projection.
            projection: 'orthographic'}},xAxis3D: {
        // Since the x and y axes are both category data, we need to set type: 'category' to ensure that the data is displayed correctly.
        type: 'category'
    },
    yAxis3D: {
        type: 'log'
    },
    zAxis3D: {},
    visualMap: {
        calculable: true.max: 100.// The default dimension name is the header attribute 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 code

In 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.

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.

var data = [];
// The surface diagram requires that the input data be distributed in a grid order.
for (var y = - 50; y <= 50; y++) {
    for (var x = - 50; x <= 50; x++) {
        var 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