小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文已参与 “掘力星计划” ，赢取创作大礼包，挑战创作激励金。
首页三维散点图需要我们引入两个插件echarts 4.9.0 对应的echarts-gl应该是1.1.2，然后我们需要配置xAxis3D, yAxis3D,zAxis3D以及grid3D，调节宽高可以调节这几个参数boxWidth,boxHeight,boxDepth,top,我们所要显示的点都放在series的data中，每个坐标系下面的name对应的是显示的坐标名。
option = {
tooltip: {},
xAxis3D: {
name: "x", //x轴显示为x
type: 'value',
// min: 'dataMin',//获取数据中的最值
// max: 'dataMax'
min: 0,
max: 80,
interval: 20,//坐标轴刻度标签的显示间隔，在类目轴中有效
axisTick: {
show: false, //显示每个值对应的刻度
},
axisLine:{ //x轴坐标轴，false为隐藏，true为显示
show: true
},
axisLabel: {
show: false ////是否显示刻度 (刻度上的数字，或者类目)， false为隐藏，true为显示
},
itemStyle: {
borderColor: "#fff",
backgroundColor: "#fff"
},
},
yAxis3D: {
name: "y",//y轴显示为y
type: 'value',
splitNumber: 5,
axisTick: {
show: false, //显示每个值对应的刻度
},
min: 0,
max: 360,
interval: 90
},
zAxis3D: {
name: "z",//z轴显示为z
type: 'value',
min: -20,
max: 60,
interval: 20,
axisTick: {
show: false, //显示每个值对应的刻度
},
},
grid3D: {
axisLine: {
lineStyle:{//坐标轴样式
color:'#070707',//轴线颜色
opacity:.8,//(单个刻度不会受影响)
width: 1//线条宽度
}
},
axisPointer: {
lineStyle: {
color: '#f00'//坐标轴指示线
},
show: false//不坐标轴指示线
},
viewControl: {
// autoRotate: true,//旋转展示
// projection: 'orthographic'
// beta:0,
distance:230, //与视角的距离，值越大，图离视角越远，图越小
alpha:7, //绕x轴旋转的角度（上下旋转），增大，视角顺时针增大（向上）
beta:20, //绕y轴旋转的角度（左右旋转），增大，视角逆时针增大（向右）
center:[-15,-5,-20] //第一个参数：增大，视角沿x轴正方向水平右移动（图向左）；第二个参数：增大，视角沿y轴正方向垂直向上移动（图向下）；第三个参数：增大，视角向z轴正方向移动（图变小）
},
boxWidth: 120,
boxHeight: 70,
boxDepth: 120,
top: -100
},
series: [{
type: 'scatter3D',
dimensions: ['x', 'y', 'z'//悬浮到点时弹出的显示框信息
],
// encode: {
// x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
// y: 1, // 表示维度 2 映射到 y 轴。
// z: 3,
// tooltip:['a','c','b'], // 表示维度 3、2、4 会在 tooltip 中显示。
// label: 'a' // 表示 label 使用维度 3。
// },
data: [
[0, 0, 0],
[1, 0, 0],
[0, 1, 0],
[0, 1, 1],
[21, 24, 25],
[22, 25, 26],
],
symbolSize: 4,//点的大小
// symbol: 'triangle',
itemStyle: {
// borderWidth: 1,
color: "#87f0e5",
// borderColor: 'rgba(255,255,255,0.8)'//边框样式
},
emphasis: {
itemStyle: {
color: '#ccc'//高亮
}
},
// itemStyle: {
// color: "#87f0e5"
// }
}],
backgroundColor: "#e8e8e8"
};
实现效果图如下：
