echarts立体柱形图

ECharts 是一个基于 JavaScript 的开源可视化库，它可以用于制作各种类型的图表，包括立体柱形图。立体柱形图是一种三维图表，它可以展示数据在三个方向上的变化情况，通过不同的高度来表示数据的大小。

在 ECharts 中制作立体柱形图，需要使用柱形图和三维坐标系两个组件。柱形图组件用于绘制柱形，而三维坐标系组件则负责展示立体效果。

下面是一个简单的立体柱形图的配置示例：

option = {
    tooltip: {},
    visualMap: {
        max: 20,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        }
    },
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'category',
        data: ['2019', '2020', '2021']
    },
    grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        viewControl: {
            distance: 300
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: true
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: [
            ['A', 0, '2019', 10],
            ['B', 1, '2019', 15],
            ['C', 2, '2019', 13],
            ['D', 3, '2019', 17],
            ['E', 4, '2019', 12],
            ['A', 0, '2020', 7],
            ['B', 1, '2020', 9],
            ['C', 2, '2020', 11],
            ['D', 3, '2020', 15],
            ['E', 4, '2020', 8],
            ['A', 0, '2021', 12],
            ['B', 1, '2021', 8],
            ['C', 2, '2021', 14],
            ['D', 3, '2021', 10],
            ['E', 4, '2021', 15]
        ],
        shading: 'lambert',
        label: {
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        itemStyle: {
            opacity: 0.8
        }
    }]
};

以上代码中，我们定义了一个三维坐标系和一个柱形图。柱形图的数据包括横轴、纵轴和高度，通过 series.type 属性指定为 bar3D 类型。grid3D 中定义了一些参数用于控制立体效果的显示，包括箱子的宽度和深度，视角距离和光照等。在页面中引入 echarts.min.js 文件后，可以通过调用 echarts.init() 方法和 setOption() 方法将配置应用到图表中。