如何使用Echarts实现3D柱状图?

ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以运行在浏览器中,生成各种图形,包括柱状图、折线图、饼图等。在 ECharts 5.0 以后的版本中,增加了对 3D 图形的支持,包括 3D 柱状图。

以下是一个简单的示例,展示如何使用 ECharts 创建一个 3D 柱状图:

// 引入 echarts
var echarts = require('echarts');

// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    visualMap: {
        show: false,
        min: 0,
        max: 20,
        inRange: {
            color: ['#e0ffff', '#006edd']
        }
    },
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis3D: {
        type: 'category',
        data: ['1', '2', '3', '4', '5']
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        viewControl: {
            // projection: 'orthographic'
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: true
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: [
            [0, 0, 5],
            [0, 1, 1],
            [0, 2, 0],
            [0, 3, 3],
            [0, 4, 4],
            [1, 0, 3],
            [1, 1, 3],
            [1, 2, 0],
            [1, 3, 4],
            [1, 4, 2],
            [2, 0, 2],
            [2, 1, 2],
            [2, 2, 5],
            [2, 3, 1],
            [2, 4, 0],
            [3, 0, 1],
            [3, 1, 4],
            [3, 2, 2],
            [3, 3, 5],
            [3, 4, 3],
            [4, 0, 2],
            [4, 1, 1],
            [4, 2, 3],
            [4, 3, 4],
            [4, 4, 5]
        ],
        shading: 'lambert',
        label: {
            textStyle: {
                fontSize: 16
            },
            formatter: function (params) {
                return params.value[2];
            }
        },
        itemStyle: {
            opacity: 0.8
        },
        emphasis: {
            label: {
                fontSize: 20,
                color: '#900'
            },
            itemStyle: {
                color: '#900'
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这段代码创建了一个 3D 柱状图,xAxis3DyAxis3D 是类别轴,表示柱状图的 x 和 y 方向,zAxis3D 是数值轴,表示柱状图的高度。series 数据中的每一项是一个长度为 3 的数组,分别代表 x、y 坐标和 z 值(即柱子的高度)。你可以根据需要修改这些数据和配置项来满足你的需求。

posted @   王铁柱6  阅读(176)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示