Echarts 5 瞎入门指南 - 10

本章学习下3D柱状图

    //首先我们要另外引入一个依赖库echarts-gl
    import 'echarts-gl'
    
    //创建3维柱状图数据， 这里我们先创建一个柱子看看效果
    let seriesData = [ [0, 0, 60] ]
    
    //创建options 可以看出这里跟普通2维的属性不太一样了， 使用了3维坐标系
    const options = {
        xAxis3D: {
            type: 'category',
            data: ['数学', '英语']
        },
        yAxis3D: {
            type: 'category',
            data: ['2021-上学期', '2021-下学期']
        },
        zAxis3D: { type: 'value' },
        grid3D: { }, //坐标系暂时先不动
        series: [
            {
                type: 'bar3D',
                barSize: [20, 20], //设置柱子大小， 对应 [x，y]  
                data: seriesData,
            }
        ]
    }
复制代码

这样一个简单的3D效果就出来啦啦啦

可以看出每个坐标轴都有默认显示名称， 我们也可以把它去掉

    xAxis3D = {
        ...
        name: '', //默认x y z
        //也可以设置name的样式
        nameTextStyle: {...}
        //设置 轴data文字 样式
        textStyle： {}
    }
复制代码

然后又感觉柱子3D效果不够明显， 菱角不够突兀，我们接着设置下反射光模型 shading

    series =  {
        ...
        //默认color
        shading: 'realistic',  //可选值 realistic / color / lambert   
        //这样设置看着立体效果就比较好
        //lambert-兰伯特光照模型: 表面后，向四面八方反射，产生的漫反射效果。这是一种理想的漫反射光照模型
        //这里试了下 lambert 和 realistic 感觉差距不是很大
    }
复制代码

接下来让我们探索下grid3D

grid3D

    grid3D = {
        //environment: '#fff', 设置了这个会覆盖options.backgroundColor
        boxWidth: 200,  //宽度 --> x
        boxDepth: 80,  //深度  --> y
        //设置轴线
        axisLine: {
            lineStyle: {}
        }
    }
复制代码

接下来讲下控制视角

viewControl

    grid3D = {
        ...
        viewControl: {
            //投影方式： 默认 perspective 透视投影： 从一个点
            projection: 'orthographic',  //正交投影
            distance: 500,   //视角与物体的距离， 值越大看到的越小
            
        }
    }
复制代码

这里对比下正交投影与透视投影

正交投影

透视投影

可能不太好区分， 这里找了两张百度图片大家看了就懂了

透视投影就是从某个投射中心将物体投射到单一投影面上所得到的图形。

正交投影就是数学的投影， 它会重叠许多部分， 比如我们看俯视图

自动旋转

    grid3D = {
        viewControl: {
            ...
            autoRotateDirection: 'cw' //默认从上往下看顺时针， 'ccw': 逆时针
            autoRotate: true, //自动旋转
        }
    }
复制代码

设置光照

light: {
    main: {
        color: 'yellow', //光照颜色
        intensity: 2.5,  //光照强度  强度越大 柱子颜色越接近光照颜色
    }
}
复制代码

最后再拓展下数据， 展示多个柱子并立图

//添加 x轴 数据
xAxis3D.data = ['语文', '数学', '英语', '历史']

//添加series data数据
seriesData = [ 
    [0, 0, 65],
    [1, 0, 89],
    [2, 0, 70],
    [3, 0, 90]
]
复制代码

可以看到我们只做了y轴上学期的那一排, 如果要设置下学期的就要设置4 x 2 组数据（m排 x n列）

最后的轻语

红包不到手， 包你命没有 ------ 包不同