<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D散点图</title>
<!-- <script src="echarts.min.js"></script> -->
<!-- <script src="a/echarts.min.js"></script> -->
<!-- <script src="echarts-gl.min.js"></script> -->
<!-- <script src="a/echarts-gl.min.js"></script> -->
<script src="lib/echarts.min.js"></script>
<script src="lib/echarts-gl.min.js"></script>
</head>
<body style="background-color: #336699;">
<div id="main" style="width:500px;height:600px;margin: 0 auto;background-color: #336699;"></div>
</body>
</html>
<script>
var myChart = echarts.init(document.getElementById('main'));
console.log(echarts.version);
// 模拟实际数据IP
var list = [["192.168.1.86", "data"],
["192.168.1.1", "data"],
["192.168.1.87", "data"],
["192.168.3.73", "other"],
["192.168.1.152", "other"],
["192.168.2.66", "other"],
["192.168.2.36", "each"],
["192.168.2.101", "each"],
["192.168.2.220", "tt"],]
// 统计IP所有的IP子网段和IP类型
let subnet_arr = [];
let type_arr = [];
list.forEach(item => {
var subnet = item[0].split("."); //子网段
subnet = subnet[0] + "." + subnet[1] + "." + subnet[2];
subnet_arr.push(subnet); //存储IP子网段
type_arr.push(item[1]);
});
subnet_arr = [... new Set(subnet_arr)]; //子网段去重
type_arr = [... new Set(type_arr)]; // IP类型去重
type_arr.sort(function (a, b) { return a - b });
// 已分配IP
let AllocatedIP = [];
let AllocatedIP_1 = [];
for (var z = 0; z < list.length; z++) { //z轴
var subnet = list[z][0].split("."); //子网段
subnet = subnet[0] + "." + subnet[1] + "." + subnet[2];
var z_index = subnet_arr.indexOf(subnet); //该节点的z轴坐标
var IP_last = list[z][0].split(".").pop(); //IP的最后一段 192.168.1.110 110
var num = 1; //IP初始
for (var x = 0; x < 15; x++) { //x轴
for (var y = 0; y < 17; y++) { //y轴
// 判断IP是否分配
if (num == IP_last) {
AllocatedIP.push([x, y, z_index, list[z][0], list[z][1]]);
}
num++;
}
}
}
// 未分配的IP,虚拟IP
let UnallocatedIP = [];
for (var z = 0; z < subnet_arr.length; z++) { //z轴
var subnet = subnet_arr[z]; //子网段
var num = 1; //IP初始
for (var x = 0; x < 15; x++) { //x轴
for (var y = 0; y < 17; y++) { //y轴
//判断IP是否未分配
var No_IP = [x, y, z, subnet + '.' + num];
if (AllocatedIP.toString().indexOf(No_IP.toString()) == -1) {
UnallocatedIP.push([x, y, z, subnet + '.' + num]);
}
num++;
}
}
}
// 初始化echarts
// 未分配
let UnallocatedData = {
name: "default",
type: 'scatter3D',
data: UnallocatedIP,
}
let series = [];//所有数据
let legend = [];//IP类型图例
for (var i = 0; i < type_arr.length; i++) {
var arr = [];
// 查找类型
AllocatedIP.forEach(item => {
if (item[4] == type_arr[i]) {
item.pop();
arr.push(item);
}
});
let AllocatedData = {
id: type_arr[i],
name: type_arr[i],
type: 'scatter3D',
data: arr,
}
series.push(AllocatedData);
legend.push(type_arr[i].toString());
}
series.push(UnallocatedData);
console.log(444, series);
legend.sort(function (a, b) { return a - b });
var option = {
legend: {
show: true,
data: legend
},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value'
},
grid3D: {
axisLine: {
lineStyle: { color: '#fff' }
},
axisPointer: {
lineStyle: { color: '#fff' }
},
viewControl: {
// autoRotate: true
}
},
series: series
}
option && myChart.setOption(option);
myChart.on('click', function (e) {
console.log(e);
});
</script>
同样的问题啊
低版本的echarts没有任何问题，但是高版本就有问题，查了很久都没有找到解决办法，希望大佬告知