Learn about 3D bar charts in this chapter

    // First we need to introduce another dependency library echarts-gl
    import 'echarts-gl'
    
    // Create a 3d histogram. Here we create a column to see what it looks like
    let seriesData = [ [0.0.60]]// Select * from 'options' where' options' = '3'
    const options = {
        xAxis3D: {
            type: 'category'.data: ['mathematics'.'English']},yAxis3D: {
            type: 'category'.data: ['2021- Last term '.'2021- Next semester ']},zAxis3D: { type: 'value' },
        grid3D: {},// Let the coordinate system stay
        series: [{type: 'bar3D'.barSize: [20.20].// Set column size to [x, y]
                data: seriesData,
            }
        ]
    }
Copy the code

This is a simple 3D effect la la la la

As you can see, each axis has a default display name, which we can also remove

    xAxis3D = {
        ...
        name: ' '.// The default is x, y, and z
        // You can also set the style of name
        nameTextStyle: {... }// Set the axis data text styleTextStyle: {}}Copy the code

Then I felt that the 3D effect of the pillars was not obvious enough, and the water chestnut was not sharp enough, so we set the light reflection model

    series =  {
        ...
        / / the default color
        shading: 'realistic'.// Realistic/color/lambert is optional
        // This is a good way to look at the stereo
        // Lambert-Lambert-light model: a surface that is reflected in all directions, creating a diffuse effect. This is an ideal model for diffuse illumination
        // The difference between Lambert and Realistic is not too great
    }
Copy the code

Let’s explore grid3D

grid3D

    grid3D = {
        //environment: '# FFF ', this will override options. BackgroundColor
        boxWidth: 200.// Width --> x
        boxDepth: 80.// Depth --> y
        // Set the axis
        axisLine: {
            lineStyle: {}}}Copy the code

Now let’s talk about controlling perspective

viewControl

    grid3D = {
        ...
        viewControl: {
            Perspective projection: From a point
            projection: 'orthographic'.// Orthogonal projection
            distance: 500.// The distance between the view and the object. The larger the value, the smaller the view}}Copy the code

Here we contrast the orthogonal projection with the perspective projection

Orthogonal projection

Perspective projection

May not be very good to distinguish, here to find two Baidu pictures you see to understand

Perspective projection is a figure obtained by projecting an object from a projection center onto a single projection plane.

An orthogonal projection is a mathematical projection, and it overlaps a lot of things, like if we look at the top view

Automatic rotation

    grid3D = {
        viewControl: {...autoRotateDirection: 'cw' // The default is to look clockwise from the top, 'CCW ': counterclockwise
            autoRotate: true.// Automatic rotation}}Copy the code

Set up light

Light: {main: {color: 'yellow', // color: 'yellow', // color: 'yellow', // color: 'yellow'}}Copy the code

Finally, the data is expanded to show multiple columns standing together

// Add the X-axis data
xAxis3D.data = ['Chinese'.'mathematics'.'English'.'history']

// Add series data
seriesData = [ 
    [0.0.65],
    [1.0.89],
    [2.0.70],
    [3.0.90]]Copy the code

You can see that we’ve only done the row on the Y-axis from last semester, so if we want to do the next semester we have to do 4 x 2 sets of data (m rows x n columns)

The last whisper

Red packets do not come to hand, package your life is not different —— package