250Echarts - 3D 曲面(Sphere Parametric Surface)

简介: 250Echarts - 3D 曲面(Sphere Parametric Surface)
效果图

源代码
option = {
    tooltip: {},
    visualMap: {
        show: false,
        dimension: 2,
        min: -1,
        max: 1,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: {},
    grid3D: {},
    series: [{
        type: 'surface',
        parametric: true,
        // shading: 'albedo',
        parametricEquation: {
            u: {
                min: -Math.PI,
                max: Math.PI,
                step: Math.PI / 20
            },
            v: {
                min: 0,
                max: Math.PI,
                step: Math.PI / 20
            },
            x: function (u, v) {
                return Math.sin(v) * Math.sin(u);
            },
            y: function (u, v) {
                return Math.sin(v) * Math.cos(u);
            },
            z: function (u, v) {
                return Math.cos(v);
            }
        }
    }]
};
目录
相关文章
263Echarts - 3D 折线图(三维折线图正交投影)
263Echarts - 3D 折线图(三维折线图正交投影)
158 0
|
8月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
9月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
262Echarts - 3D 路径图(Flights on Geo3D)
262Echarts - 3D 路径图(Flights on Geo3D)
108 0
261Echarts - 3D 路径图(Flights GL)
261Echarts - 3D 路径图(Flights GL)
90 0
260Echarts - 3D 路径图(Flights)
260Echarts - 3D 路径图(Flights)
81 0
259Echarts - 3D 路径图(Airline on Globe)
259Echarts - 3D 路径图(Airline on Globe)
62 0
|
4月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
146 1
|
5月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
608 1
微信小程序使用echarts图表(ec-canvas)