这个例子根据官网例子修改而来,一开始引入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