Este ejemplo modificado de acuerdo con el sitio web oficial de ejemplos de, comenzando la introducción del efecto 3d, no sé cómo configurar, el sitio web oficial solo para los parámetros, pasó mucho tiempo, así que para escribir esta documentación, dé el junior necesario socio para ahorrar tiempo con el
cambio de configuración
Referencia:
vue usa echart para completar el cono curvo de la serie 3d 2
vue usa echart para completar las representaciones de semicírculo hueco de la serie 3d 3
El primer paso es instalar dependencias
npm install echarts-gl -S
npm install echarts
Hay estas dos cosas en package.json, que indican una instalación exitosa
"echarts": "^5.0.1",
"echarts-gl": "^2.0.0",
No digas tonterías, solo mira el código
<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>
Esta demostración ahorra tiempo para que los amigos utilicen
otras demostraciones de casos en 3D