echarts 3D柱状图

作者：System 时间：2024年08月21日分类：所有,jquery 字数：1819

ECharts 3D 柱状图可以使用 ECharts 的 bar3D 图表类型来实现。以下是一个简单的 ECharts 3D 柱状图示例代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
 
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/echarts-gl.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            tooltip: {},
            visualMap: {
                max: 20,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: {},
            yAxis3D: {},
            zAxis3D: {},
            grid3D: {
                viewControl: {
                    // projection: 'orthographic'
                }
            },
            series: [{
                type: 'bar3D',
                data: [[0, 0, 5], [1, 0, 3], [2, 0, 2], [3, 0, 1], [4, 0, 1], [5, 0, 1], [6, 0, 1], [7, 0, 1], [8, 0, 1], [9, 0, 1]],
                shading: 'color',
                // 3D 柱状图的宽度
                barSize: 0.8,
                // 3D 柱状图的深度
                depthSize: 0.8
            }]
        };
 
        myChart.setOption(option);
 
        window.onresize = function () {
            myChart.resize();
        };
    </script>
</body>
</html>

这段代码中，我们首先通过 <script> 标签引入了 ECharts 的库和 ECharts-GL 的扩展库。然后，我们初始化了一个 ECharts 实例，并设置了一个包含 3D 柱状图的配置项 option。在 series 中，我们定义了 type 为 'bar3D' 的数据系列，并提供了一些示例数据。

这个示例提供了一个简单的 3D 柱状图，你可以根据自己的需求调整数据和配置项来定制你的图表。

echarts 3D柱状图

评论已关闭

推荐阅读