background:
Recently, a new requirement needs to be developed. It is necessary to draw a scatter diagram of randomly generated numbers, requiring the distance between points to be greater than a certain value.
Solutions:
Obtain each coordinate point through a loop. Every time a new coordinate point is obtained, it must be compared with the previously generated coordinate point. If it is greater than the specified distance, it meets the conditions and
exits the loop. If it is less than or equal to the distance, continue to generate randomly. , for comparison.
Implementation code:
let dataArray = [];
for (let i = 1; i < 10; i++) {
let obj = {
};
if (i == 0) {
obj.x = Math.round(Math.random() * 100);
obj.y = Math.round(Math.random() * 100);
} else {
let number = 0;
while (number <= 10) {
obj.x = Math.round(Math.random() * 100);
obj.y = Math.round(Math.random() * 100);
let flag = dataArray.every((item) => {
//点与点之间的计算公式
number = Math.sqrt(Math.pow(Math.abs(obj.x - item.x), 2) + Math.pow(Math.abs(obj.y - item.y), 2));
return number >= 10
})
if (flag) {
break
}
}
}
dataArray.push(obj);
}
console.log(dataArray)
Cooperate with the complete code implementation of echarts:
Can be directly copied to the local to see the effect! ! ! !
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {
};
var option;
let dataArray = [];
for (let i = 1; i < 10; i++) {
let obj = {
};
if (i == 0) {
obj.x = Math.round(Math.random() * 100);
obj.y = Math.round(Math.random() * 100);
} else {
let number = 0;
while (number <= 10) {
obj.x = Math.round(Math.random() * 100);
obj.y = Math.round(Math.random() * 100);
let flag = dataArray.every((item) => {
//点与点之间的计算公式
number = Math.sqrt(Math.pow(Math.abs(obj.x - item.x), 2) + Math.pow(Math.abs(obj.y - item.y), 2));
return number >= 10
})
if (flag) {
break
}
}
}
dataArray.push(obj);
}
console.log(dataArray)
let newArray = []
dataArray.map((ele) => {
let array = []
array.push(ele.x);
array.push(ele.y);
newArray.push(array);
})
option = {
xAxis: {
},
yAxis: {
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
series: [
{
symbolSize: 20,
data: newArray,
type: 'scatter'
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
Renderings:
