vue 3d series using echart complete circular surface of a hollow
vue echart completed using 3 3d series of semicircular surfaces hollow
renderings
The first step is to install dependencies
npm install echarts-gl -S
npm install echarts
There are these two things in package.json, indicating successful installation
"echarts": "^5.0.1",
"echarts-gl": "^2.0.0",
Don't talk nonsense, just look at the code
<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 / 30,
},
v: {
min: 0,
max: Math.PI,
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>
This demo saves time for friends