如何使用JavaScript及相关库创建示例样式的三轴柱状图？

下面用ECharts（免费开源的JavaScript图表库）实现你需要的三轴柱状图，代码示例如下：

1. 引入ECharts库 #

通过CDN直接引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

2. 准备图表容器 #

<div id="triAxisChart" style="width: 800px; height: 600px;"></div>

3. 编写图表初始化代码 #

// 初始化图表实例
const chart = echarts.init(document.getElementById('triAxisChart'));

// 图表配置项
const option = {
    tooltip: { trigger: 'item' },
    xAxis: {
        type: 'category',
        data: ['产品A', '产品B', '产品C', '产品D']
    },
    yAxis: { type: 'value' },
    zAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3']
    },
    series: [
        {
            type: 'bar3D',
            data: [
                ['产品A', 'Q1', 120],
                ['产品A', 'Q2', 150],
                ['产品A', 'Q3', 180],
                ['产品B', 'Q1', 90],
                ['产品B', 'Q2', 110],
                ['产品B', 'Q3', 130],
                ['产品C', 'Q1', 200],
                ['产品C', 'Q2', 220],
                ['产品C', 'Q3', 250],
                ['产品D', 'Q1', 160],
                ['产品D', 'Q2', 170],
                ['产品D', 'Q3', 190]
            ],
            label: { show: true, formatter: p => p.value[2] }
        }
    ]
};

// 渲染图表
chart.setOption(option);

自定义调整 #

• 柱子颜色：在series中添加itemStyle: { color: '#xxx' }，也可以按维度设置不同颜色
• 轴标签、tooltip样式：直接修改option里的对应配置项
• 如果用Highcharts，可使用其column3d系列，配置逻辑类似

内容的提问来源于stack exchange，提问作者Brent Heigold