Echarts在线免费图表

 
            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,
            },
        },
    ],
};