234Echarts - 3D 柱状图(Bar3D - Simplex Noise)

简介: 234Echarts - 3D 柱状图(Bar3D - Simplex Noise)
效果图

源代码
$.getScript('vendors/simplex.js').done(function () {
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
    var data = [];
    for (var i = 0; i <= 50; i++) {
        for (var j = 0; j <= 50; j++) {
            var value = noise.noise2D(i / 20, j / 20);
            valMax = Math.max(valMax, value);
            valMin = Math.min(valMin, value);
            data.push([i, j, value * 2 + 4]);
        }
    }
    return data;
}
var valMin = Infinity;
var valMax = -Infinity;
var data = generateData(2, -5, 5);
console.log(valMin, valMax);
myChart.setOption(option = {
    visualMap: {
        show: false,
        min: 2,
        max: 6,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value',
        max: 10,
        min: 0
    },
    grid3D: {
        axisLine: {
            lineStyle: { color: '#fff' }
        },
        axisPointer: {
            lineStyle: { color: '#fff' }
        },
        viewControl: {
            // autoRotate: true
        },
        light: {
            main: {
                shadow: true,
                quality: 'ultra',
                intensity: 1.5
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: data,
        shading: 'lambert',
        label: {
            formatter: function (param) {
                return param.value[2].toFixed(1);
            }
        }
    }]
});
});
目录
相关文章
|
5月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
187 0
|
2月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
97 0
|
3月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
254 0
|
4月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
4月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
52 0
|
5月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
5月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
5月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
697 0
|
10月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
10月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图

热门文章

最新文章

下一篇
无影云桌面