使用 ECharts 构建定制化的3D条形图

本文链接：https://blog.youkuaiyun.com/Cwuji_wusi/article/details/143332174

深入解析和创新：使用 ECharts 构建定制化的3D条形图

在现代数据可视化领域，三维图表由于其生动的视觉表现和能够提供额外数据维度的能力而变得越来越受欢迎。本文将详尽讨论如何使用 ECharts 这一强大的可视化库来创建一个具有高度定制化和视觉吸引力的三维条形图，进而探索其背后的概念及技术实现过程。

引入 ECharts 和三维数据可视化的重要性

ECharts，作为一个开源且功能丰富的数据可视化工具，提供了广泛的图表类型支持和灵活的配置选项，使得开发者能够轻松地实现从简单的折线图到复杂的三维动态图表的各种需求。特别是在三维数据展示方面，ECharts 不仅能够给观众呈现标准二维图表难以表达的深度和层次，还能通过动态互动增强用户的体验。

示例探究：构建一个 3D 条形图

数据定义与执行逻辑

为了构建这个图表，示例代码首先定义了 customData 数组，其中包含了若干特定的数据点，这些点将在三维空间中高亮显示，每个数据点都有唯一的颜色标记，以便区分：

const customData = [
    { name: '数据1', value: [0, 0, 10], itemStyle: { color: '#25b8d2' } },
    { name: '数据2', value: [0, 4, 78], itemStyle: { color: '#00e086' } },
    ...
];

接着，通过双层循环结构生成了一个10x10的网格数据结构，这个结构通过寻找 customData 中的项来决定每个单位是否使用自定义的 z 值或颜色：

for (let x = -5; x < 6; x++) {
    for (let y = -5; y < 6; y++) {
        ... // 数据生成逻辑
    }
}

每个数据点的生成考虑了是否有对应的自定义数据，如果没有则使用默认值，这种方法确保了图表的灵活性和数据的完整性。

配置详解：美化和功能强化

在 option 配置中，除了设置了数据、类型和基本的样式外，还对三维图表的环境和交互进行了精心设计：

视图控制：通过 viewControl 属性调整用户视角控制的灵敏度和自动旋转属性，这不仅增加了图表的用户互动性，也让数据展示更加生动。
光照效果：通过调整 light 的各个参数，为三维图表增添了更多的视觉层次感和现实感，使得数据的高低起伏更加明显。
样式细节：在 itemStyle 中使用透明度和颜色渐变增加了视觉的吸引力，同时配合静音的背景和强化的边框样式，确保图表在视觉上既统一又突出。

option = {
    ...,
    series: [{
        type: 'bar3D',
        ...
        itemStyle: {
            opacity: 0.8,
        },
    }],
    ...
};

效果图

在这里插入图片描述

源码

var data = [];

// 定义自定义数据
const customData = [
    {
        name: '数据1',
        value: [0, 0, 10],
        itemStyle: {
            color: '#25b8d2'
        }
    },
    {
        name: '数据2',
        value: [0, 4, 78],
        itemStyle: {
            color: '#00e086',
        }
    },
    {
        name: '数据3',
        value: [2, 1, 62],
        itemStyle: {
            color: '#067bd1'
        }
    },
    {
        name: '数据4',
        value: [4, 0, 42],
        itemStyle: {
            color: '#b78437',
        }
    }
];

// 生成 10x10 网格数据
for (let x = -5; x < 6; x++) {
    for (let y = -5; y < 6; y++) {
        // 查找是否有自定义数据
        const customItem = customData.find(item => item.value[0] === x && item.value[1] === y);
        const z = customItem ? customItem.value[2] : 0; // 使用自定义的 z 值，缺省为 0
        
        data.push({
            name: customItem ? customItem.name : `数据(${x},${y})`, // 名称为自定义名称或默认名称
            value: [x, y, z],
            itemStyle: {
                color: customItem ? customItem.itemStyle.color : '#25b8d2' // 自定义颜色或默认颜色
            }
        });
    }
}

option = {
    backgroundColor: '#031744',
    title: {
        show: false,
        text: '',
        textStyle: {
            fontSize: 18,
            fontWeight: 600,
            fontFamily: 'siyuanheiti_Thin',
        },
        subtext: '',
        subtextStyle: {
            fontSize: 16,
        },
    },
    tooltip: {
        show: false, // 关闭 tooltip
    },
    visualMap: {
        show: false,
    },
    xAxis3D: {
        show: false,
        name: '',
        type: 'category',
    },
    yAxis3D: {
        show: false,
        name: '',
        type: 'category',
    },
    zAxis3D: {
        show: false,
        name: '',
        type: 'value',
    },
    grid3D: {
        boxWidth: 100,
        boxDepth: 100,
        axisLine: {
            show: true,
            lineStyle: {
                width: 0
            }
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false,
        },
        axisPointer: {
            show: false,
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: true,
            },
            ambient: {
                intensity: 0.7,
                shadow: true,
            },
        },
        viewControl: {
            alpha: 30, // Y 轴角度
            beta: 30, // X 轴角度
            zoomSensitivity: 0.5, // 鼠标缩放灵敏度
            autoRotate: true, // 启用自动旋转
            autoRotateAfterStill: 5, // 停顿后自动旋转时间
            distance: 250, // 视距
        },
    },
    series: [
        {
            type: 'bar3D',
            name: '数量',
            data: data,
            bevelSize: 0.1,
            shading: 'lambert',
            label: {
                show: false, // 不显示标签
                distance: 1,
                textStyle: {
                    color: '#fff',
                    fontSize: 18,
                    borderWidth: 0,
                    borderColor: 'none',
                    backgroundColor: 'rgba(255,255,255,0)',
                    fontFamily: 'impact, Simhei',
                },
            },
            itemStyle: {
                opacity: 0.8,
            },
        },
    ],
};