245Echarts - 3D 散点图(Scatter3D - Simplex Noise)

简介: 245Echarts - 3D 散点图(Scatter3D - 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 <= 20; i++) {
        for (var j = 0; j <= 20; j++) {
            for (var k = 0; k <= 20; k++) {
                var value = noise.noise3D(i / 10, j / 10, k / 10);
                valMax = Math.max(valMax, value);
                valMin = Math.min(valMin, value);
                data.push([i, j, k, 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: {
            symbolSize: [0.5, 25],
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
            colorAlpha: [0.2, 1]
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        axisLine: {
            lineStyle: { color: '#fff' }
        },
        axisPointer: {
            lineStyle: { color: '#fff' }
        },
        viewControl: {
            // autoRotate: true
        }
    },
    series: [{
        type: 'scatter3D',
        data: data
    }]
});
});
目录
相关文章
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
242 0
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
288 3
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
JSON 前端开发 JavaScript
使用Echarts 动态更新散点图
使用Echarts 动态更新散点图
168 0
使用Echarts 动态更新散点图
ECharts散点图大小调整
ECharts散点图大小调整
358 0
|
前端开发
【前端图表】echarts实现散点图x轴时间轴
【前端图表】echarts实现散点图x轴时间轴
517 0
|
定位技术
264Echarts - GL 散点图(10 million Bulk GPS points)
264Echarts - GL 散点图(10 million Bulk GPS points)
128 0
|
12月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1043 1
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
1736 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章

下一篇
日志分析软件