235Echarts - 3D 柱状图（Voxelize image）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89876019

效果图

源代码

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var imgData;
var currentImg;

// Configurations
var config = {
    scale: 0.3,
    roughness: 0,
    metalness: 1,
    projection: "orthographic",
    depthOfField: 4,
    lockY: false,
    move: true,
    sameColor: false,
    color: '#777',
    colorContrast: 1.2,
    lightIntensity: 1,
    lightColor: '#fff',
    lightRotate: 30,
    lightPitch: 40,
    AO: 1.5,
    showEnvironment: false,

    barNumber: 80,
    barBevel: 0.18,
    barSize: 1.2
};

option = {
    tooltip: {},
    backgroundColor: "#000",
    xAxis3D: {
        type: "value"
    },
    yAxis3D: {
        type: "value"
    },
    zAxis3D: {
        type: "value",
        min: 0,
        max: 100
    },
    grid3D: {
        show: false,
        viewControl: {
            projection: "perspective",
            alpha: 45,
            beta: -45,
            panSensitivity: config.move ? 1 : 0,
            rotateSensitivity: config.lockY ? [1, 0] : 1,
            damping: 0.9,
            distance: 60
        },
        postEffect: {
            enable: true,
            bloom: {
                intensity: 0.2
            },
            screenSpaceAmbientOcclusion: {
                enable: true,
                intensity: 1.5,
                radius: 5,
                quality: "high"
            },
            screenSpaceReflection: {
                enable: true
            },
            depthOfField: {
                enable: true,
                blurRadius: config.depthOfField,
                fstop: 10,
                focalDistance: 55
            }
        },
        boxDepth: 100,
        boxHeight: 20,
        environment: "none",
        light: {
            main: {
                shadow: true,
                intensity: 2
            },
            ambientCubemap: {
                texture: 'data-gl/asset/pisa.hdr',
                exposure: 2,
                diffuseIntensity: 0.2,
                specularIntensity: 1.5
            }
        }
    }
};

function updateData(pixelData, width, height) {
    console.time("update");
    var data = new Float32Array(pixelData.length / 4 * 3);
    var off = 0;
    for (var i = 0; i < pixelData.length / 4; i++) {
        var r = pixelData[i * 4];
        var g = pixelData[i * 4 + 1];
        var b = pixelData[i * 4 + 2];

        var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
        lum = (lum - 125) * config.scale + 50;
        data[off++] = i % width;
        data[off++] = height - Math.floor(i / width);
        data[off++] = lum;
    };

    myChart.setOption({
        grid3D: {
            boxWidth: 100 / height * width
        },
        series: [{
            animation: false,
            type: "bar3D",
            shading: "realistic",
            realisticMaterial: {
                roughness: config.roughness,
                metalness: config.metalness
            },
            barSize: config.barSize,
            bevelSize: config.barBevel,
            silent: true,
            itemStyle: {
                color: config.sameColor ? config.color : function(params) {
                    var i = params.dataIndex;
                    var r = pixelData[i * 4] / 255;
                    var g = pixelData[i * 4 + 1] / 255;
                    var b = pixelData[i * 4 + 2] / 255;
                    var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
                    r *= lum * config.colorContrast;
                    g *= lum * config.colorContrast;
                    b *= lum * config.colorContrast;
                    return [r, g, b, 1];
                }
            },
            data: data
        }]
    });

    console.timeEnd("update");
}

function loadImage(img) {
    var height = (canvas.height = Math.min(config.barNumber, img.height));
    var aspect = img.width / img.height;
    var width = (canvas.width = Math.round(height * aspect));

    ctx.drawImage(img, 0, 0, width, height);

    imgData = ctx.getImageData(0, 0, width, height);

    updateData(imgData.data, width, height);
}

// Default
var img = new Image();
img.onload = function() {
    loadImage(img);
    currentImg = img;
};
img.src = "./data-gl/asset/bitcoin.png";