232Echarts - 3D 柱状图（Noise modified from marpi's demo）

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

效果图

源代码

$.getScript('vendors/simplex.js').done(function () {


var simplex = new SimplexNoise();

window.onresize = myChart.resize;

var UPDATE_DURATION = 1000;

function initVisualizer() {

    config = {
        numWaves: 2,
        randomize: randomize,
        color1: '#000',
        color2: "#300",
        color3: "#fff",
        size: 150,
        roughness: 0.5,
        metalness: 0.
    };

    //gui.add(config, "numWaves", 1, 3).name("Waves number").onChange(update).listen();
    for (var i = 0; i < 2; i++) {
        config["wave" + i + "axis" + "x"] = Math.random();
        config["wave" + i + "axis" + "y"] = Math.random();
        config["wave" + i + "rounding"] = Math.random();
        config["wave" + i + "square"] = Math.random();
    }

    function randomize() {
        //config.numWaves = Math.floor(Math.random() * 3) + 1;
        for (var i = 0; i < 2; i++) {
            config["wave" + i + "axis" + "x"] = Math.random();
            config["wave" + i + "axis" + "y"] = Math.random();
            config["wave" + i + "rounding"] = Math.random();
            config["wave" + i + "square"] = Math.random();
        }

        // Iterate over all controllers
        for (var i in gui.__controllers) {
            gui.__controllers[i].updateDisplay();
        }
        update();
    }

    function update() {
        var item = [];
        var dataProvider = [];

        var mod = .1

        //config.numWaves = Math.round(config.numWaves)

        //var occurenceR = Math.random() * .02
        //var r = 0//Math.random()
        for (var s = 0; s < config.size * config.size; s++) {
            var x = s % config.size;
            var y = Math.floor(s / config.size);

            //if (Math.random() < occurenceR)
            //    r = Math.random()

            var output = 0;
            for (var i = 0; i < config.numWaves; i++) {
                var n = simplex.noise2D(i * 213 + (-50 + x) * mod * (1 - config["wave" + i + "axis" + "x"]) * .5, i * 3124 + (-50 + y) * mod * (1 - config["wave" + i + "axis" + "y"]) * .5)
                n = Math.pow(n, 1.95 - 1.9 * config["wave" + i + "rounding"])
                var square = Math.floor((1.1 - config["wave" + i + "square"]) * 100)
                n = Math.round(n * square) / square;
                    //output*=n
                if (output < n)
                    output = n;
            }
            dataProvider.push([x, y, (output + 0.1) * 2]);
        }


        myChart.setOption({
            visualMap: {
                inRange: {
                    barSize: 100 / config.size,
                    color: [config.color1, config.color2, config.color3],
                }
            },
            series: [{
                data: dataProvider,
                realisticMaterial: {
                    roughness: config.roughness,
                    metalness: config.metalness
                }
            }]
        });
        //setTimeout(update, UPDATE_DURATION);
    }

    update();
}
var focalRange = 40
var blurRadius = 4

myChart.setOption(option = {
    toolbox: {
        left: 20,
        iconStyle: {
            normal: {
                borderColor: '#fff'
            }
        }
    },
    tooltip: {},
    visualMap: {
        show: false,
        min: 0.1,
        max: 2.5,
        inRange: {
            color: ['#000', '#300', '#fff']
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value',
        min: -6,
        max: 6
    },
    grid3D: {
        show: false,
        environment: '#000',
        viewControl: {
            distance: 100,
            maxDistance: 150,
            minDistance: 50,
            alpha: 38,
            beta: 220,
            minAlpha: 10,
            //maxBeta: 360,
        },
        postEffect: {
            enable: true,
            SSAO: {
                enable: true,
                intensity: 1.3,
                radius: 5
            },
            screenSpaceReflection: {
                enable: false
            },
            depthOfField: {
                enable: true,
                blurRadius: blurRadius,
                focalRange: focalRange,
                focalDistance: 70
            }
        },
        light: {
            main: {
                intensity: 1,
                shadow: true,
                shadowQuality: 'high',
                alpha: 30
            },
            ambient: {
                intensity: 0
            },
            ambientCubemap: {
                texture: 'data-gl/asset/pisa.hdr',
                exposure: 2,
                diffuseIntensity: 1,
                specularIntensity: 1
            }
        }
    },
    series: [{
        type: 'bar3D',
        silent: true,
        shading: 'realistic',
        realisticMaterial: {
            roughness: 0.5,
            metalness: 0
        },
        instancing: true,
        barSize: 0.6,
        data: [],
        lineStyle: {
            width: 4
        },
        itemStyle: {
            color: "#fff"
        },
        animation: false,
        animationDurationUpdate: UPDATE_DURATION
    }]
});

setTimeout(function() {
    initVisualizer();
});


});