239Echarts - 3D 柱状图(Stacked Bar3D)

简介: 239Echarts - 3D 柱状图(Stacked Bar3D)
效果图

源代码
$.getScript('vendors/simplex.js').done(function () {
function generateData() {
    var data = [];
    var noise = new SimplexNoise(Math.random);
    for (var i = 0; i <= 10; i++) {
        for (var j = 0; j <= 10; j++) {
            var value = noise.noise2D(i / 5, j / 5);
            data.push([i, j, value * 2 + 4]);
        }
    }
    return data;
}
var series = [];
for (var i = 0; i < 10; i++) {
    series.push({
        type: 'bar3D',
        data: generateData(),
        stack: 'stack',
        shading: 'lambert',
        emphasis: {
            label: {
                show: false
            }
        }
    });
}
myChart.setOption({
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        viewControl: {
            // autoRotate: true
        },
        light: {
            main: {
                shadow: true,
                quality: 'ultra',
                intensity: 1.5
            }
        }
    },
    series: series
});
});
目录
相关文章
|
6天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
20 0
|
6月前
|
JSON 前端开发 数据格式
【前端统计图】echarts实现简单柱状图
【前端统计图】echarts实现简单柱状图
51 0
|
6月前
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
132 0
|
6天前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
6天前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
6天前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
107 0
|
5月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
5月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图
|
6月前
|
JSON 数据可视化 JavaScript
vue+echarts实现一个叠堆柱状图
vue+echarts实现一个叠堆柱状图
52 0
|
6月前
关于Echarts柱状图监听点击事件的实现方法
关于Echarts柱状图监听点击事件的实现方法
127 0