vue使用echart 完成3d系列1之曲面空心圆

这个例子根据官网例子修改而来,一开始引入3d效果， 不知咋配置，官网只给了参数，花了好多时间， 所以写下这个文档记录一下,给需要的小伙伴节约时间用
改配置
参考：
vue使用echart 完成3d系列2之曲面锥形
vue使用echart 完成3d系列3之曲面空心半圆
效果图

第一步，先安装依赖

npm install echarts-gl -S
npm install echarts

package.json中有这两玩意，说明安装成功

 "echarts": "^5.0.1",
 "echarts-gl": "^2.0.0",

废话不多说直接看代码

<template>
	<div>
		<div id="app"></div>
	</div>
</template>
<script>
import echarts from "echarts"; //可视化
import "echarts-gl";
export default {
	name: "App",
	components: {},
	data() {
		return {
			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,
						// 改变球体颜色
						itemStyle: {
							color: function (params) {
								return "transparent";
							},
						},
						// coordinateSystem: "globe",

						blendMode: "lighter",
						// shading: "albedo",
						// 改变线条颜色
						wireframe: {
							lineStyle: {
								width: 1,
								color: "#086af0",
								opacity: 1,
							},
						},

						parametricEquation: {
							u: {
								min: -Math.PI,
								max: Math.PI,
								step: Math.PI / 20,
								// 步长
							},
							v: {
								min: 0,
								max: Math.PI,
								step: Math.PI / 20,
								// 步长
							},
							 //空心圆柱
							 // u: {
				              //   min: -Math.PI,
				              //   max: Math.PI,
				              //   step: Math.PI / 30,
				              // },
				              // v: {
				              //   min: 1,
				              //   max: 3,
				              //   step: Math.PI / 2,
				              // },
							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);
							},
						},
					},
				],
			},
		};
	},
	computed: {},
	created() {},
	mounted() {
		this.echarts();
	},
	methods: {
		echarts() {
			// 引入 ECharts 主模块
			var echarts = require("echarts/lib/echarts");
			// 引入柱状图
			require("echarts/lib/chart/bar");
			// 引入提示框和标题组件
			require("echarts/lib/component/tooltip");
			require("echarts/lib/component/title");
			// 基于准备好的dom，初始化echarts实例
			var myChart1 = echarts.init(document.getElementById("app"));

			// 绘制饼图
			myChart1.setOption(this.option, true);
		},
	},
};
</script>
<style lang="scss">
#app {
	width: 1000px;
	height: 1000px;
	background: rgba($color: #050505, $alpha: 1);
	// color: transparent;
}
</style>

这demo为小伙伴们节约时间用
其他3d案例 demo