如何使用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 @ 2025-01-07 09:33  王铁柱6  阅读(578)  评论(0)    收藏  举报